Three.js：麻烦投射基本阴影
[英]Three.js: Trouble Casting Basic Shadow
问题描述
我很抱歉提出这样一个关于三个的基本问题，但是我看不到我所缺少的。 我试图使圆环在平面上投射阴影，但是没有出现阴影。
谁能看到我所缺少的吗？ 任何指针将不胜感激！
// generate a scene object var scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); // generate a camera var aspectRatio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000); camera.position.set(0, 1, -150); // generate a renderer var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); // <3 retina renderer.setSize(window.innerWidth, window.innerHeight); // canvas size renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // generate controls var controls = new THREE.TrackballControls(camera, renderer.domElement); // generate some lights var ambientLight = new THREE.AmbientLight(0xeeeeee); scene.add(ambientLight); // create light that casts shadows var light = new THREE.PointLight(0xffffff); light.position.set(0, 0, -100); light.castShadow = true; scene.add(light); // render loop function render() { requestAnimationFrame(render); renderer.render(scene, camera); controls.update(); }; // draw some geometries var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 ); var material = new THREE.MeshNormalMaterial( { color: 0xffff00 } ); var torus = new THREE.Mesh( geometry, material ); torus.position.set(0, 0, -10); torus.castShadow = true; scene.add( torus ); var geometry = new THREE.PlaneGeometry( 200, 200, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} ); var plane = new THREE.Mesh( geometry, material ); plane.receiveShadow = true; scene.add( plane ); render();
html, body { width: 100%; height: 100%; background: #000; } body { margin: 0; overflow: hidden; } canvas { width: 100%; height: 100%; }
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script> <script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script> </body>
1 个解决方案
解决方案1
2 已采纳 2018-11-05 18:46:15
MeshBasicMaterial不反应。 您分配给它的任何颜色基本上都表现为发光颜色。 也许您打算使用MeshStandardMaterial吗？
// generate a scene object var scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); // generate a camera var aspectRatio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000); camera.position.set(0, 1, -150); // generate a renderer var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); // <3 retina renderer.setSize(window.innerWidth, window.innerHeight); // canvas size renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // generate controls var controls = new THREE.TrackballControls(camera, renderer.domElement); // generate some lights var ambientLight = new THREE.AmbientLight(0xeeeeee); // scene.add(ambientLight); // create light that casts shadows var light = new THREE.PointLight(0xffffff); light.position.set(0, 0, -100); light.castShadow = true; scene.add(light); // render loop function render() { requestAnimationFrame(render); renderer.render(scene, camera); controls.update(); }; // draw some geometries var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 ); var material = new THREE.MeshNormalMaterial( { color: 0xffff00 } ); var torus = new THREE.Mesh( geometry, material ); torus.position.set(0, 0, -10); torus.castShadow = true; scene.add( torus ); var geometry = new THREE.PlaneGeometry( 200, 200, 32 ); var material = new THREE.MeshStandardMaterial( {color: 0xffff00, side: THREE.DoubleSide} ); var plane = new THREE.Mesh( geometry, material ); plane.receiveShadow = true; scene.add( plane ); render();
html, body { width: 100%; height: 100%; background: #000; } body { margin: 0; overflow: hidden; } canvas { width: 100%; height: 100%; }
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script> <script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script> </body>
Three.js阴影投射麻烦
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.