I want to pop up a window or customized DOM element after click a child model in the scene. the content in the window can be <div> ,<img>, <video> etc.
Note: Every child models are seperated, and they have a common parent model.
I tried raycaster and interaction.But I don’t know how to done it.
And I tried the thrid party libraries, like threex and three.interaction.js. But these are doesn’t work.
Here is the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js",
"three.interaction": "../node_modules/three.interaction/build/three.interaction.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
// Try to use three.interaction but it doesn't work
import { Interaction } from 'three.interaction';
import { PerspectiveCamera } from "./src/cameras/PerspectiveCamera.js";
import { FBXLoader } from "./examples/jsm/loaders/FBXLoader.js";
import { OrbitControls } from "./examples/jsm/controls/OrbitControls.js";
let scene, container, camera, controls;
let renderer, loader, FBXloader, materials;
let raycaster = new THREE.Raycaster();
/*
Preparing for create DOM Elements and then use appendChild() to show the content.
Hoping for using document.createElement to create a new DOM element in the HTML page.
Other methods are OK of course.
*/
let body = document.body;
// Calling the init function
init();
// Calling the animate function
animate();
function init(){
// Calling the render function
render();
// Setting up a new scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
// Calling the camera function
Camera();
// Calling the model loader function
loadmodel("../model/","project");
// Calling the environment light function
envLight();
// Calling the controller function
control();
}
function Camera(){
camera = new PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(250,400,250);
}
function control(){
controls = new OrbitControls(camera, renderer.domElement);
// controls.addEventListener('change', render);
controls.minDistance = 75;
controls.maxDistance = 500;
controls.target.set(25,150,0);
controls.update();
window.addEventListener('resize', onWindowResize);
}
function loadmodel(folder, name){
FBXloader = new FBXLoader();
FBXloader.setPath(folder);
FBXloader.load(name + ".FBX", function (fbx){
fbx.position.set(0,0,0);
fbx.getObjectByName('box001');
scene.add(fbx);
renderer.render(scene,camera);
})
}
function envLight(){
const light = new THREE.AmbientLight( 0xffffff, 1);
scene.add(light);
}
function render(){
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame( animate );
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>
the final effect like this: Genius / Showroom