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>
相关推荐
三维搬砖者13 小时前
基于 Three.js 开发三维引擎-02动态圆柱墙体实现
three.js
小桥风满袖13 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
SDUERPANG15 小时前
三维目标检测|Iou3D 代码解读一
人工智能·目标检测·3d
用户38022585982415 小时前
使用three.js实现3D地球
前端·three.js
三维搬砖者20 小时前
基于 Three.js 开发三维引擎-01点类:从原理到实践
webgl·three.js
在下胡三汉1 天前
3dmax物理材质转换标准材质,物理材质转VR材质,VR材质转标准材质3dmax物理材质转标准材质插件
vr·材质
EQ-雪梨蛋花汤1 天前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr
魂断蓝桥6661 天前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
妙为2 天前
osg加入实时光照SilverLining 天空和3D 云
3d
在下胡三汉2 天前
3dmax烘焙插件3dmax法线贴图烘焙教程glb和gltf元宇宙灯光效果图烘焙烘焙光影贴图支持VR渲染器
vr·贴图