javascript - 带有弹出窗口的 3D 动画

Question

我有一个小问题，我真的不知道如何以简单的方式解决它。

我想使用 javascript 开发一个 3D 动画 Hous。我想360度移动房子，但看不到底部。此外，应该会出现一些弹出窗口。例如，如果您将鼠标移到窗口或屋顶上，应该会出现一个消息弹出窗口，描述窗口（或屋顶）。有可能以一种简单的方式开发它吗？

请帮忙

（我已经开发了一个可以自己移动的小型 3D 房子）

.html 文件

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

应用程序.js

设置变量

  let container;
  let camera;
  let render;
  let scene;
  let house;

函数 init() { 容器 = document.querySelector('.Haus');

板条箱场景

scene = new THREE.Scene();

const fov = 35;
const aspect = container.clientWidth / container.clientHeight
const near = 0.1
const far = 500;

相机设置

camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

camera.position.set(-3,5,30)

const ambient = new THREE.AmbientLight(0x404040, 3)
scene.add(ambient)

const light = new THREE.DirectionalLight(0xffffff, 20)
light.position.set(10,10,150)
scene.add(light)

渲染器

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})
renderer.setSize(container.clientWidth, container.clientHeight)
renderer.setPixelRatio(window.devicePixelRatio)

container.appendChild(renderer.domElement)

加载模型

那就是我正在使用的3d房子，那一刻房子只是360度循环

let loader = new THREE.GLTFLoader();
loader.load('./3d/scene.gltf', function(gltf){
    scene.add(gltf.scene);
    house = gltf.scene.children[0];
    renderer.render(scene,camera)
    animate();
})

}

      function animate () {
     requestAnimationFrame(animate);
     house.rotation.z += 0.005;
     renderer.render(scene,camera)

    }

     init()

标签： javascriptanimationthree.js3dpopup