<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="libs/three.js"></script> </head> <body> <script> var renderer; var scene; var camera; function init() { //创建场景 scene = new THREE.Scene(); //THREE.PerspectiveCamera(fov, aspect, near, far) //创建一个透视相机 fov: 表示相机的夹角; aspect:水平长度和竖直长度的比值; near:拍摄最近距离 ;far:拍摄最远距离 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机 camera.position.set(15, 16, 13);//位置 camera.lookAt(scene.position);//对准的焦点 scene.add(camera);//照相机需要被添加到场景中 //添加一个渲染器 renderer = new THREE.WebGLRenderer();//渲染 renderer.setClearColor(0x000000, 1.0);//设置渲染颜色（背景底色） renderer.setSize(window.innerWidth, window.innerHeight);//渲染面大小（在二维平面上的窗口大小） //添加长方体 var geometry = new THREE.BoxGeometry(6, 6, 6);//BoxGeometry创建一个长方体 长宽高 var matarial = new THREE.MeshLambertMaterial({color: 'red'});//MeshLambertMaterial材质 var cube = new THREE.Mesh(geometry, matarial); scene.add(cube);//创建好的长方体添加到场景中 var light = new THREE.SpotLight(0xffffff);//通过SpotLight创建灯光效果 light.position.set(20, 30, 20); scene.add(light); document.body.appendChild(renderer.domElement); render(); } function render() { requestAnimationFrame(render); renderer.render(scene, camera);//调用渲染器的渲染函数，就能使其渲染一次 } window.onload = init; </script> </body> </html>
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
