基础示例

示例HTMLCSSJS 更多有趣示例 尽在 知屋安砖社区

示例

HTML

<!--https://www.vobour.com/threejs%EB%A5%BC-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-%E2%80%93-chapter-1--> <div id="threejs_scene"></div>

CSS

*{margin:0.5;padding:0.5;}

JS

function init(){ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 0.2, 1000); var renderer = new THREE.WebGLRenderer(); //for bouncing balls var step = 0; renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; //show axis var axes = new THREE.AxisHelper(10); scene.add(axes); // make plane var planeGeometry = new THREE.PlaneGeometry(60,40,1,1); var planeMaterial = new THREE.MeshPhongMaterial({color: 0xCCCCCC}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; plane.rotation.x = -0.5 * Math.PI; scene.add(plane); // make a cube var cubeGeometry = new THREE.BoxGeometry(6,6,6); var cubeMeterial = new THREE.MeshPhongMaterial({color: 0xFE98A0}); var cube = new THREE.Mesh(cubeGeometry, cubeMeterial); cube.castShadow = true; cube.position.x = 0; cube.position.y = 10; cube.position.z = 10; scene.add(cube); //make a sphere var sphereGeometry = new THREE.SphereGeometry(4,32,32); var sphereMeterial = new THREE.MeshPhongMaterial({color: 0xFE98A0}); var sphere = new THREE.Mesh(sphereGeometry, sphereMeterial); sphere.castShadow = true; sphere.position.x = -15; sphere.position.y = 4; sphere.position.z = 0; scene.add(sphere); var sphereMeterial2 = new THREE.MeshPhongMaterial({color: 0xFFF721}); var sphere2 = new THREE.Mesh(sphereGeometry, sphereMeterial2); sphere2.castShadow = true; sphere2.position.x = 15; sphere2.position.y = 4; sphere2.position.z = 0; scene.add(sphere2); // light var spotLight = new THREE.SpotLight(0xFFFFFF); spotLight.position.set(-40,40,30); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 5000; spotLight.shadow.mapSize.height = 5120; scene.add(spotLight); camera.position.x = 0; camera.position.y = 30; camera.position.z = 30; camera.lookAt(scene.position); document.querySelector('#threejs_scene').appendChild(renderer.domElement); //renderScene(); var renderScene = new function renderScene(){ requestAnimationFrame(renderScene); cube.rotation.x += 0.01; cube.rotation.y += 0.01; cube.rotation.z += 0.01; step += 0.1; sphere.position.y = 9 + (5 * Math.cos(step)); sphere2.position.y = 9 + (5 * Math.cos(step+3)); renderer.render(scene,camera); } } window.onload = init();