当前位置：首页 > article >正文

three.js实现裸眼双目平行立体视觉

article 2025/1/23 20:30:19

three.js实现裸眼双目平行立体视觉原理：

利用两个相机、两个渲染器，同时渲染同一个场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js双摄像机同时渲染显示（平行立体视觉效果）</title>
    <style>
        body { margin: 0;background-color: "#000000"; }
        canvas { display: block; }
        #canvas1 { position: absolute; top: 0; left: 0; width: 50%; height: 100%; border: 1px solid;}
        #canvas2 { position: absolute; top: 0; right: 0; width: 50%; height: 100%; border: 1px solid;}
    </style>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>

    <script type="importmap">
		{
		  "imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
		  }
		}
	</script>

	
    <script type="module">

        import * as THREE from 'three';

        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87CEEB); // 设置背景为天蓝色

        // 创建一个环境光源
        const ambientLight = new THREE.AmbientLight(0x888888); // 颜色为深灰色
        scene.add(ambientLight);

        // 点光源灯光        
        const pointLight = new THREE.PointLight(0xFFFFFF, 500, 1000);
        pointLight.position.set(3, 30, -10); // 设置光的位置
        pointLight.castShadow = true;        

        pointLight.shadow.mapSize.width = 1024;
        pointLight.shadow.mapSize.height = 1024;
        pointLight.shadow.camera.near = 0.5;
        pointLight.shadow.camera.far = 500;

        scene.add(pointLight);
              

        //地基
        const geometry0 = new THREE.BoxGeometry(1000,1,1000);
        const material0 = new THREE.MeshStandardMaterial({
            color: 0xffffff,
            roughness: 0.7,
            metalness: 0.2
        });
        const cube0 = new THREE.Mesh(geometry0, material0);
        cube0.position.set(0, 0, 0);
        cube0.castShadow = true;
        cube0.receiveShadow = true;
        scene.add(cube0);


        // 立方体
        const geometry = new THREE.BoxGeometry(8,8,8);
        const material = new THREE.MeshStandardMaterial({
            color: 0xff0000,
            roughness: 0.7,
            metalness: 0.2
        });
        const cube = new THREE.Mesh(geometry, material);
        cube.position.set(3, 15, -30);
        cube.castShadow = true;
        cube.receiveShadow = true;
        scene.add(cube);

        // 第一个相机
        const camera1 = new THREE.PerspectiveCamera(30, window.innerWidth / 2 / window.innerHeight, 0.1, 1000);
        camera1.position.set(2, 30, 10);
        camera1.lookAt(cube.position);

        // 第二个相机
        const camera2 = new THREE.PerspectiveCamera(30, window.innerWidth / 2 / window.innerHeight, 0.1, 1000);
        camera2.position.set(4, 30, 10);
        camera2.lookAt(cube.position);

        // 第一个渲染器
        const renderer1 = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas1') });
        renderer1.setSize(window.innerWidth / 2, window.innerHeight);
        renderer1.shadowMap.enabled = true;

        // 第二个渲染器
        const renderer2 = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas2') });
        renderer2.setSize(window.innerWidth / 2, window.innerHeight);
        renderer2.shadowMap.enabled = true;

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            cube.rotation.z += 0.01;

            renderer1.render(scene, camera1);
            renderer2.render(scene, camera2);
        }

        animate();
    </script>
</body>
</html>

查看全文

http://www.kler.cn/a/515359.html