As a professional graphic designer, I am facing an issue with Three.js
https://i.sstatic.net/6ZsWa.jpg
I have tried several solutions, but none seem to work effectively. In my attempt, I duplicated the imported model and changed its name. Despite trying various methods found online, they all result in overlap, further complicated by having two different names. Below is my .js code:
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 4;
var windowHalfY = window.innerHeight / 4;
// Initial setup
init();
animate();
function init() {
container = document.getElementById('container1');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 4;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 1, 1).normalize();
scene.add(directionalLight);
scene.background = new THREE.Color(0xffffff);
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("untitled-scene.json", function (obj) {
scene.add(obj);
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 200);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
}
container = document.getElementById('container2');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 4;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 1, 1).normalize();
scene.add(directionalLight);
scene.background = new THREE.Color(0xffffff);
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("untitled-scene2.json", function (obj) {
scene.add(obj);
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 200);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(canvas_width, canvas_height);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 16;
mouseY = (event.clientY - windowHalfY) / 16;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .03;
camera.position.y += (- mouseY - camera.position.y) * .03;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
Here's the accompanying HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Fun Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
/* CSS styles */
</style>
</head>
<body>
<div id="info">
My Fun Project
</div>
<div id="container1">
<script src="num1.js"></script><br/>
<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="stats.min.js"></script>
</div>
<div id="container2">
<script src="num1.js"></script><br/>
<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="stats.min.js"></script>
</div>
</body>
</html>This project is meant for fun, but if you'd like to collaborate, feel free to reach out!