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

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

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

html 复制代码
<!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>
相关推荐
Binary_ey3 小时前
AR/VR 显示画质失真?OAS百叶窗波导案例破难题
人工智能·ar·vr·软件需求·光学软件
ykjhr_3d3 小时前
VR法庭相比传统法庭有哪些优势
vr
答案—answer4 小时前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
熊猫钓鱼>_>8 小时前
元宇宙空间和数字世界:虚拟现实带给我们什么?
vr
在下胡三汉9 小时前
什么是 3D 文件?
3d
Coffeeee9 小时前
Threejs粒子动效之龙卷风
前端·three.js·动效
Mintopia10 小时前
Three.js 画布纹理:像素世界的魔法编织术
前端·javascript·three.js
答案answer10 小时前
three.js 实现几个炫酷的粒子特效(火焰,烟雾,烟花)
前端·three.js
ykjhr_3d1 天前
期待在 VR 森林体验模拟中实现与森林的 “虚拟复现”
vr
点云登山者1 天前
登山第二十六梯:单目3D检测一切——一只眼看世界
3d·3d检测·检测一切·单目3d检测