【ThreeJs 学习入门】1. 创建基本场景和旋转的长方体
【ThreeJs 学习入门】1. 创建基本场景和旋转的长方体
Threejs的创建过程很简单：
（1）创建渲染场景Scene，需要创建camera和创建render
（2）直接加入Mesh，需要通过geometry和material进行定义
（3）添加到场景中渲染
（4）通过renderer动画进行更新
400
<head>
<title>test for the first threejs</title>
</head>
<body>
<canvas id="c"></canvas>
<script type="module">
import * as THREE from './js/three.module.js'
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ canvas });
const fov = 75;
const aspect = 2;// the canvas default
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
//create color
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
// //MeshBasicMaterial is not affected by lights
// //const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });// greenish blue
// const material = new THREE.MeshPhongMaterial({color:0x44aa88});
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube);
//create camera assistant
var helper = new THREE.CameraHelper(camera);
scene.add(helper);
function makeInstance(geometry, color, x) {
const material = new THREE.MeshPhongMaterial({ color });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = x;
return cube;
}
const cubes = [
makeInstance(geometry, 0x44aa88, 0),
makeInstance(geometry, 0x8844aa, -2),
makeInstance(geometry, 0xaa8844, 2)
]
function render(time) {
time *= 0.001;// convert time to seconds
cubes.forEach((cube, ndx) => {
const speed = 1 + ndx * .1;
const rot = time * speed;
cube.rotation.x = rot;
cube.rotation.y = rot;
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>
</body>
页:
[1]