Three.js 将对象附着到环境地图的地板_Three.js

Three.js 将对象附着到环境地图的地板

three.js

Three.js 将对象附着到环境地图的地板,three.js,Three.js,您好，我已经创建了一个环境贴图，它缝合了6个图像来创建一个房间，我在房间中有一个对象投射阴影，试图使其看起来附着在地板上，但我仍然得到了对象在三维空间中浮动的效果。有没有一种方法可以让我绕过它把物体粘到地上。请记住，环境贴图是围绕摄影机位置渲染的 --示例1.js function envMap(scene) { var testMaterials = [ 'image1.png', 'image2.png', 'image3.png',

您好，我已经创建了一个环境贴图，它缝合了6个图像来创建一个房间，我在房间中有一个对象投射阴影，试图使其看起来附着在地板上，但我仍然得到了对象在三维空间中浮动的效果。有没有一种方法可以让我绕过它把物体粘到地上。请记住，环境贴图是围绕摄影机位置渲染的

--示例1.js

function envMap(scene) {

    var testMaterials = [
      'image1.png',
      'image2.png',
      'image3.png',
      'image4.png',
      'image5.png',
      'image6.png'
    ];

    reflectionCube = new THREE.CubeTextureLoader().load( cubeMaterials );
    reflectionCube.format = THREE.RGBFormat;

    scene.background = reflectionCube;

}

--示例1.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, 
        minimum-scale=1.0, maximum-scale=1.0">
        <style>
           body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
           }
        </style>
    </head>
    <body>

        <script src="three.js"></script>

        <script>
            var camera, scene, renderer;
            var mesh;
            init();
            animate();
            function init() {

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.shadowMap.enabled = true;
                .shadowMap.type = THREE.PCFShadowMap;

                scene = new THREE.Scene();

                envMap( scene );

                document.body.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
            function animate() {
                requestAnimationFrame( animate );

                renderer.render( scene, camera );
            }
        </script>
    </body>
</html>


测试
身体{
边际：0px；
背景色：#000000；
溢出：隐藏；
}
摄像机、场景、渲染器；
var网格；
init（）；
制作动画（）；
函数init（）{
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
.shadowMap.type=THREE.PCFShadowMap；
场景=新的三个。场景（）；
环境地图（场景）；
document.body.appendChild（renderer.doElement）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}

我的朋友，那代码不行。尝试添加相机、灯光等。

帮助我们帮助你

我的朋友，那代码不行。尝试添加相机、灯光等。

帮助我们帮助你

对不起。我的代码确实有效，我把它作为一个例子写了下来，却忘了这些东西。我有点希望人们能理解我在尝试什么，并知道一个解决方案。测试代码。至少在我看来，这意味着让人们了解我正在努力做什么。我不认为它需要100%可用对不起。我的代码确实有效，我把它作为一个例子写了下来，却忘了这些东西。我有点希望人们能理解我在尝试什么，并知道一个解决方案。测试代码。至少在我看来，这意味着让人们了解我正在努力做什么。我不认为它需要100%可用