<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Scene</title>
<script src="../../three-part/threejs/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
init();
function init(){
// Scenes allow you to set up what and where is to be rendered by three.js.
// This is where you place objects, lights and cameras.
let scene = new THREE.Scene();
/**
* Camera that uses perspective projection
* PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
* fov — Camera frustum vertical field of view.
* aspect — Camera frustum aspect ratio.
* near — Camera frustum near plane.
* far — Camera frustum far plane.
*/
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// The WebGL renderer displays your beautifully crafted scenes using WebGL.
let render = new THREE.WebGLRenderer();
// Sets the clear color and opacity.
render.setClearColor(new THREE.Color(0x000000));
render.setSize(window.innerWidth, window.innerHeight);
/**
* An axis object to visualize the 3 axes in a simple way.
* The X axis is red. The Y axis is green. The Z axis is blue.
* AxesHelper( size : Number )
* size -- (optional) size of the lines representing the axes. Default is 1.
*/
let axes = new THREE.AxesHelper(20);
scene.add(axes);
// create a plane
/**
* PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
* width — Width along the X axis. Default is 1.
* height — Height along the Y axis. Default is 1.
* widthSegments — Optional. Default is 1.
* heightSegments — Optional. Default is 1.
* @type {PlaneGeometry}
*/
let planeGeometry = new THREE.PlaneGeometry(60, 20, 4, 4);
// A material for drawing geometries in a simple shaded (flat or wireframe) way.
let planeMaterial = new THREE.MeshBasicMaterial({
color : 0xaaaaa
});
/**
* Representing triangular polygon mesh based objects
* Mesh( geometry : Geometry, material : Material )
* geometry — (optional) an instance of Geometry or BufferGeometry. Default is a new BufferGeometry.
* material — (optional) a single or an array of Material. Default is a new MeshBasicMaterial
* @type {Raycaster.params.Mesh|Mesh}
*/
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);
scene.add(plane);
// create a cube
/**
* BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'.
* On creation, the cuboid is centred on the origin, with each edge parallel to one of the axes.
* BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
* width — Width; that is, the length of the edges parallel to the X axis. Optional; defaults to 1.
* height — Height; that is, the length of the edges parallel to the Y axis. Optional; defaults to 1.
* depth — Depth; that is, the length of the edges parallel to the Z axis. Optional; defaults to 1.
* widthSegments — Number of segmented rectangular faces along the width of the sides. Optional; defaults to 1.
* heightSegments — Number of segmented rectangular faces along the height of the sides. Optional; defaults to 1.
* depthSegments — Number of segmented rectangular faces along the depth of the sides. Optional; defaults to 1.
* @type {BoxGeometry}
*/
let cubeGeometry = new THREE.BoxGeometry(6, 6, 6, 3, 3, 3);
let cubeMatrial = new THREE.MeshBasicMaterial({
color : 0xff0000,
wireframe : true
});
let cube = new THREE.Mesh(cubeGeometry, cubeMatrial);
cube.position.set(0, 3, 0);
scene.add(cube);
// create a sphere
/**
* A class for generating sphere geometries
* SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
* radius — sphere radius. Default is 1.
* widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
* heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
* phiStart — specify horizontal starting angle. Default is 0.
* phiLength — specify horizontal sweep angle size. Default is Math.PI * 2.
* thetaStart — specify vertical starting angle. Default is 0.
* thetaLength — specify vertical sweep angle size. Default is Math.PI.
* @type {SphereGeometry}
*/
let sphereGeometry = new THREE.SphereGeometry(4, 20, 20, 0, Math.PI, 0, Math.PI / 2);
let sphereMatrial = new THREE.MeshBasicMaterial({
color : 0x7777ff,
wireframe : true
});
let sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.set(20, 4, 2);
scene.add(sphere);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
document.getElementById("container").appendChild(render.domElement);
render.render(scene, camera);
}
</script>
</body>
</html>
运行结果：
网友评论