three.js跟着教程实现VR效果(四)

参照教程:https://juejin.cn/post/6973865268426571784(作者:大帅老猿)

1.WebGD3D引擎 用three.js

(1)使用立方体6面图 camera放到 立方体的中间 like "回" 让贴图向内翻转

(2)使用球体(sphere)实现 需要一张全景图片 贴到球体上 其他同上 "回" 反贴 进入球体

2.css3D 更轻量的3D引擎 css3d-engine 只有14kb 用div+css来搭建3维场景 比较容易添加信息点(标签点击事件那种)

3.图片信息点多 高清图 不占地儿的解决方案 pano2vr

要花钱买 是一个所见即所得的全景VR制作软件 可以直接输出HTML5静态网页

按照大佬的教程 我实现的效果

javascript 复制代码
import * as THREE from '../../build/three.module.js';
    window.THREE = THREE;

    import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';


    // 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.pixelRatio = window.devicePixelRatio;
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.append(renderer.domElement);


    // 2. 创建场景
    const scene = new THREE.Scene();

    // 3. 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    camera.position.set(5, 5, 10);

    camera.lookAt(0, 0, 0);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(10, 10, 10)
    scene.add(directionalLight);

    const textloader = new THREE.TextureLoader();
    var texture = textloader.load('./images/scene.jpg');
    var sphereMaterial = new THREE.MeshBasicMaterial({map: texture});

    var sphereGeometry = new THREE.SphereGeometry(/*半径*/1, 50, 50);
    sphereGeometry.scale(1, 1, -1);


    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    // sphere.material.wireframe  = true;

    scene.add(sphere);


    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update();


    const clock = new THREE.Clock();
    function animate() {
      requestAnimationFrame(animate);
      const elapsedTime = clock.getElapsedTime(); // 返回已经过去的时间, 以秒为单位
      sphere.rotation.y = elapsedTime * 0.1; // 两秒自转一圈
      renderer.render(scene, camera);
    }

    animate() 

图片素材

相关推荐
三年三月15 小时前
three的基本介绍
three.js
小桥风满袖20 小时前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js
伶俜monster1 天前
光影编程师:Threejs Shader 基础全攻略
前端·webgl·three.js
小桥风满袖1 天前
Three.js-硬要自学系列14 (PBR材质、环境贴图、清漆层、物理材质透光率)
前端·css·three.js
Mintopia1 天前
Three.js 物体碰撞试验学习指南
前端·javascript·three.js
小桥风满袖2 天前
Three.js-硬要自学系列13 (加载gltf外部模型、加载大模型)
前端·css·three.js
前端小崔2 天前
从零开始学习three.js(14):一文详解three.js中的场景Scene
webgl·three.js·数据可视化
小桥风满袖2 天前
Three.js-硬要自学系列12 (各种贴图的综合应用)
前端·css·three.js
Mintopia2 天前
Three.js 与物理引擎配合学习指南
前端·javascript·three.js
马玉霞3 天前
threejs加载stl模型在uniapp中的应用(打包安卓)
three.js