导入的 3D 对象不会投射具有三.js的阴影
imported 3D objects are not casting shadows with three.js
我目前正在研究三个.js并且我已经通过这三个导入了我在C4D中制作的3D模型。OBJMTLLoader 成功,但我无法让对象投射阴影。我使用了object.castShadow = true,但它不起作用,但我可以在三个中创建几何体.js来投射阴影,所以我知道场景设置正常。
测试场景目前在这里:http://kirkd.co.uk/dev/,现在已经更新了下面建议的修复程序。
代码如下,如果有人可以指出我做错了什么,或者即使导入的对象可以投射阴影,那么我将永远感激不尽。
塔。
<script>
var container;
var controls;
var camera, scene, renderer;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.z = 500;
camera.position.y = 500;
scene = new THREE.Scene();
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 500, 1000, 500 );
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
scene.add( spotLight );
var companion = new THREE.OBJMTLLoader();
companion.load( 'companion2.obj', 'companion.mtl', function ( object ) {
object.position.set(0,-20,0);
object.scale.set( 0.8, 0.8, 0.8 );
object.castShadow = true;
scene.add( object );
});
var floorGeometry = new THREE.CubeGeometry(1000,4,1000);
var floorMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.x=0;
floor.position.y=-130;
floor.position.z=0;
floor.receiveShadow = true;
scene.add(floor);
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
mesh = new THREE.Mesh( geometry);
scene.add( mesh );
mesh.position.set(-100,200,10);
mesh.castShadow = true;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
spotLight.shadowCameraVisible = true;
var step=0;
render();
};
function render() {
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame( animate );
render();
}
</script>
您的对象具有子网格体,每个子网格体都需要将castShadow
设置为 true
。
在加载器回调中,添加以下内容:
object.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; } } );
三.js 66
相关文章:
- three.js:如何让透明的png精灵投射和接收阴影
- 如何在d3.js饼图或圆环图中添加阴影
- 在d3.js圆中添加阴影效果
- Three.js.obj阴影不起作用
- 使用 D3.js 单击圆圈时生成阴影
- 三个js阴影
- 三个.js和阴影的问题
- 三.JS不投射阴影
- 阴影捕手在三个.js/阴影在透明材料上
- 难以在三.js中投射阴影
- 我的代码有什么问题?(三js聚光灯阴影)
- 聚合物可拖动与交互.js/阴影DOM选择器
- 三.js阴影使一切都变黑
- 织物.js具有模糊阴影的边界框
- 三个.js中平行光的阴影范围
- Three.js-阴影投射异常
- Three.js-打开照明的阴影
- Javascript Three.JS阴影贴图不工作
- 没有显示物体部分的阴影 - 三.js
- THREE.JS圆形地板,看起来像阴影