本文代码效果
!DOCTYPEhtml
html
head
title/title
stylecanvas{width:%;height:%}/style
scriptsrc="js/three.js"/script
/head
body
script
varscene=newTHREE.Scene();//创建场景
varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,0);//创建摄像机
varrenderer=newTHREE.WebGLRenderer();///创建渲染器
varob=newTHREE.Object3D()//创建一个ob类
renderer.setSize(window.innerWidth,window.innerHeight);//设置渲染尺寸
document.body.appendChild(renderer.domElement);//渲染结果添加到网页
vargeometry=newTHREE.CubeGeometry(1,1,1);//创建一个盒模型
varmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});//创建材质
varcube=newTHREE.Mesh(geometry,material);//创建立方体
ob.add(cube)//立方体添加到ob类中
//scene.add(cube);//立方体添加到场景中
varaxishelper=newTHREE.AxisHelper(5)//创建坐标系
//scene.add(axishelper)//场景中添加坐标系
ob.add(axishelper)//ob类中添加坐标系
scene.add(ob)//场景中添加ob类
camera.position.z=5;//摄像机的z坐标=5就是正对物体后退5步
camera.position.x=0;//摄像机的x坐标=0就是正对物体左移0步
//camera.lookAt(0,0,0)//摄像机看向的位置，这是默认值可以不要
functionrender(){//定义渲染函数循环调用加载动画
requestAnimationFrame(render);//循环调用渲染函数
//cube.rotation.x+=0.01;
ob.rotation.y+=0.01;//ob类也就是方块和坐标系的结合体沿y轴旋转
//cube.rotation.z=6.29;
//console.log(cube.rotation.z)/
renderer.render(scene,camera);//渲染场景和摄像机
}
render();
/script
/body
/html