1.three.js在使用之前要先创建一个场景,一个画布,一个相机,
2.样式中
body{
margin:0;
padding:0;
}
canvas{
width:100%;
height:100%;
}
3.把下面代码写在你的script标签里面,
// 创建一个场景,一个画布,一个相机
var scene=new THREE.Scene();
va rcamera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth/2,window.innerHeight/2);
document.body.appendChild(renderer.domElement);
// 具体实例(立方体)
vargeometry=newTHREE.BoxGeometry(1,1,1);
varmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});
varcube=newTHREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z=5;
// 渲染
functionrender() {
requestAnimationFrame(render);
cube.rotation.x+=0.1;
cube.rotation.y+=0.1;
renderer.render(scene,camera);
}
render();
4.运行一个运动的立方体就成了
5.代码截图
Document