hi everyone!
I’m using three.JS for virtual lighting project & i have some questions
1.how to create light inner object (obj file) to glow outside? (like this)
2.how to drag & move group of all child’s of object? (like this & this)
please explain in a clear example
@mugen87
@prisoner849
<!DOCTYPE html>
<html lang="en">
<head>
<title>Three.js 3D Virtual lighting</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script type="module">
import * as THREE from '../build/three.module.js';
import { DDSLoader } from './jsm/loaders/DDSLoader.js';
import { MTLLoader } from './jsm/loaders/MTLLoader.js';
import { OBJLoader } from './jsm/loaders/OBJLoader.js';
import { DragControls } from './jsm/controls/DragControls.js';
let container;
let enableSelection = false;
let camera, scene, renderer;
let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
const objects = [];
const mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster();
init();
animate();
function init() {
const container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 250;
// scene & lights
scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
/*
//Background texture
var bgTexture = new THREE.TextureLoader().load("textures/background.jpg");
bgTexture.minFilter = THREE.LinearFilter;
scene.background = bgTexture;*/
// Background Colour
scene.background = new THREE.Color(0x808080);
// model
const onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
}
};
const onError = function () { };
const manager = new THREE.LoadingManager();
manager.addHandler( /\.dds$/i, new DDSLoader() );
// comment in the following line and import TGALoader if your asset uses TGA textures
// manager.addHandler( /\.tga$/i, new TGALoader() );
new MTLLoader( manager )
.setPath( 'models/obj/bardia/' )
.load( 'bardia.mtl', function ( materials ) {
materials.preload();
new OBJLoader( manager )
.setMaterials( materials )
.setPath( 'models/obj/bardia/' )
.load( 'bardia.obj', function ( object ) {
object.position.y = 5;
object.scale.set( 20, 20, 20 );
objects.push( object );
scene.add( object );
console.log(object);
}, onProgress, onError );
} );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize );
}
const controls = new DragControls( objects, camera, renderer.domElement );
document.addEventListener( 'click', onClick );
function onClick( event ) {
event.preventDefault();
if ( enableSelection === true ) {
const draggableObjects = controls.getObjects();
draggableObjects.length = 0;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
const intersections = raycaster.intersectObjects( objects, true );
if ( intersections.length > 0 ) {
const object = intersections[ 0 ].object;
if ( group.children.includes( object ) === true ) {
object.material.emissive.set( 0x000000 );
scene.attach( object );
} else {
object.material.emissive.set( 0xaaaaaa );
group.attach( object );
}
controls.transformGroup = true;
draggableObjects.push( group );
}
}
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
