Javascript 单击-Three.js更改对象模型的颜色
我在这里试图做的是，当用户单击对象模型的某个特定部分时，该部分的线框将显示哪个部分正在发生更改。用户可以从调色板中为同一零件选择颜色。在颜色选择上，我希望模型的该部分更改颜色。此处的child.material.color.set（selectedColor）由于某些原因无法工作。我错过什么了吗？请原谅冗长的代码库Javascript 单击-Three.js更改对象模型的颜色,javascript,three.js,Javascript,Three.js,我在这里试图做的是，当用户单击对象模型的某个特定部分时，该部分的线框将显示哪个部分正在发生更改。用户可以从调色板中为同一零件选择颜色。在颜色选择上，我希望模型的该部分更改颜色。此处的child.material.color.set（selectedColor）由于某些原因无法工作。我错过什么了吗？请原谅冗长的代码库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tacchhi.com Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="palette">
<span></span>
<span></span>
<span></span>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="js/Three-r80.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/Projector.js"></script>
<script>
//GLOBAL VARIABLES
var renderCanvas, scene, camera, renderer, cameraControl, objModel, raycaster, vector, clickInfo, marker, modelHasLoaded;
//VIEWPORT DIMENSIONS
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
function init(){
//SCENE
window.scene = new THREE.Scene();
//CAMERA
camera = new THREE.PerspectiveCamera(75, viewportWidth/viewportHeight, 1, 1000);
camera.position.set(0, 20, 160);
camera.lookAt(scene.position);
//RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize(viewportWidth, viewportHeight);
renderer.setClearColor('#ccc');
//LIGHTING
var ambientLight = new THREE.AmbientLight('#000');
scene.add(ambientLight);
var pointLight = new THREE.PointLight('#fff', 1, 2000);
pointLight.position.set(-window.innerWidth, 0, 0);
var pointLight2 = new THREE.PointLight('#fff', 1, 2000);
pointLight2.position.set(window.innerWidth, 0, 0);
var pointLight3 = new THREE.PointLight('#fff', 1, 2000);
pointLight3.position.set(0, viewportHeight/2, -100);
var pointLight4 = new THREE.PointLight('#fff', 1, 2000);
pointLight4.position.set(0, 0, 100);
scene.add(pointLight);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(pointLight4);
//OBJECT MODEL WITHOUT MATERIALS
var objLoader = new THREE.OBJLoader();
objLoader.setPath('obj/')
objLoader.load('deadpool.obj', function(object){
objModel = object;
objModel.position.set(0, -90, 0);
objModel.rotation.y = 300;
objModel.name = 'ObjectModel3D';
modelHasLoaded = true;
scene.add(objModel);
});
//ORBIT CONTROLS
cameraControl = new THREE.OrbitControls(camera);
//RENDER AFTER OBJECT HAS LOADED
function renderCheck(){
if(modelHasLoaded){
render();
clearInterval(renderCheckInterval);
//set mouse cursor for drag/dragend
renderCanvas = document.getElementsByTagName("canvas")[0];
renderCanvas.style.cursor = "url('images/grab-icon.png'), auto";
renderCanvas.addEventListener('mousedown', function(){
renderCanvas.style.cursor = "url('images/grabbing-icon.png'), auto";
}, false);
renderCanvas.addEventListener('mouseup', function(){
renderCanvas.style.cursor = "url('images/grab-icon.png'), auto";
}, false);
} else {
console.log('model not loaded');
}
}
var renderCheckInterval = setInterval(renderCheck, 500);
//RAYCASTING
raycaster = new THREE.Raycaster();
vector = new THREE.Vector3();
clickInfo = {
x: 0,
y: 0,
userHasClicked: false
};
window.addEventListener('click', function(event){
clickInfo.userHasClicked = true;
clickInfo.x = event.clientX;
clickInfo.y = event.clientY;
}, false);
//MARKER FOR RAYCASTING
marker = new THREE.Mesh(new THREE.SphereGeometry(1), new THREE.MeshBasicMaterial({color: 'red'}));
//APPEND CANVAS
document.body.appendChild(renderer.domElement);
}
function render(){
//check for user clicks
if(clickInfo.userHasClicked){
clickInfo.userHasClicked = false;
var x = (clickInfo.x / innerWidth) * 2 - 1;
var y = -(clickInfo.y / innerHeight) * 2 + 1;
vector.set(x, y, 0.5);
vector.unproject(camera);
raycaster.set(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(scene.children, true);
if(intersects.length){
var target = intersects[0];
//place marker on click location
marker.position.set(target.point.x, target.point.y, target.point.z);
scene.add(marker);
applyWireframe();
//display color palette
TweenLite.to($('.palette'), 0.75, {left: '0', ease: Power4.easeOut});
} else {
removeWireframe();
//hide color palette
TweenLite.to($('.palette'), 0.75, {left: '-100px', ease: Power4.easeOut});
}
}
requestAnimationFrame(render);
cameraControl.update();
renderer.render(scene, camera);
}
//APPLY WIREFRAME FOR THE SELECTED PART
function applyWireframe(){
var wireframeObject = scene.getObjectByName('ObjectModel3D', true);
wireframeObject.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.wireframe = true;
child.material.linewidth = 1;
child.material.color.set('#333');
}
});
}
//REMOVE WIREFRAME FOR THE SELECTED PART
function removeWireframe(){
scene.remove(marker);
var wireframeObject = scene.getObjectByName('ObjectModel3D', true);
wireframeObject.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.wireframe = false;
child.material.color.set('#fff');
}
});
}
//SET COLOR OF OBJECT MODEL
$('.palette span').click(function(){
$color = new THREE.Color($(this).css('backgroundColor'));
var selectedColor = '#' + $color.getHexString();
var item = scene.getObjectByName('ObjectModel3D', true);
item.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.color.set(selectedColor);
console.log('material color set to - ' + selectedColor);
}
});
});
window.onload = init;
</script>
</body>
</html>
Tacchi.com演示
//全局变量
var renderCanvas、场景、摄影机、渲染器、摄影机控制、对象模型、光线投射器、向量、单击信息、标记、模型已加载；
//视口尺寸
var viewportWidth=window.innerWidth；
var viewportHeight=window.innerHeight；
函数init（）{
//场面
window.scene=new THREE.scene（）；
//摄像机
摄像机=新的三个透视摄像机（75，视角宽度/视角高度，11000）；
摄像机位置设置（0,20,160）；
摄像机。注视（场景。位置）；
//渲染器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（视口宽度、视口高度）；
renderer.setClearColor（'#ccc'）；
//照明
var ambientLight=new-THREE.ambientLight（'#000'）；
场景。添加（环境光）；
var pointLight=新的三点光源（'fff'，12000年）；
pointLight.position.set（-window.innerWidth，0,0）；
var pointLight2=新的三点光源（'fff'，12000）；
pointLight2.position.set（window.innerWidth，0,0）；
var pointLight3=新的三点光源（'fff'，12000）；
pointLight3.位置.设置（0，视口高度/2，-100）；
var pointLight4=新的三点光源（'fff'，12000年）；
pointLight4.位置.设置（0,0,100）；
场景。添加（点光源）；
场景。添加（pointLight2）；
场景。添加（pointLight3）；
场景。添加（pointLight4）；
//无材质的对象模型
var objLoader=new THREE.objLoader（）；
objLoader.setPath（'obj/'）
objLoader.load（'deadpool.obj'，函数（对象）{
objModel=对象；
对象模型位置集（0，-90,0）；
对象模型旋转y=300；
objModel.name='ObjectModel3D'；
modelHasLoaded=true；
scene.add（objModel）；
});
//轨道控制
cameraControl=新的三个轨道控制（摄像头）；
//加载对象后渲染
函数renderCheck（）{
如果（已加载模型）{
render（）；
清除间隔（renderCheckInterval）；
//设置鼠标光标进行拖动/拖动
renderCanvas=document.getElementsByTagName（“画布”）[0]；
renderCanvas.style.cursor=“url（'images/grab icon.png'），auto”；
renderCanvas.addEventListener（'mousedown'，function（）{
renderCanvas.style.cursor=“url（'images/grabbing icon.png'），auto”；
}，假）；
renderCanvas.addEventListener（'mouseup'，function（）{
renderCanvas.style.cursor=“url（'images/grab icon.png'），auto”；
}，假）；
}否则{
log（“模型未加载”）；
}
}
var renderCheckInterval=setInterval（renderCheck，500）；
//光线投射
raycaster=new-THREE.raycaster（）；
向量=新的三个。向量3（）；
单击信息={
x:0,，
y:0，
userHasClicked:false
};
window.addEventListener（'click'，函数（事件）{
clickInfo.userHasClicked=true；
单击info.x=event.clientX；
单击info.y=event.clientY；
}，假）；
//光线投射标记器
marker=new THREE.Mesh（new THREE.SphereGeometry（1），new THREE.MeshBasicMaterial（{color:'red'}））；
//附加画布
document.body.appendChild（renderer.doElement）；
}
函数render（）{
//检查用户点击
如果（clickInfo.userHasClicked）{
clickInfo.userHasClicked=false；
变量x=（clickInfo.x/innerWidth）*2-1；
变量y=-（单击信息y/内部高度）*2+1；
向量集（x，y，0.5）；
矢量。取消投影（摄像机）；
raycaster.set（camera.position，vector.sub（camera.position.normalize（））；
var intersects=raycaster.intersectObjects（scene.children，true）；
if（与长度相交）{
var目标=相交[0]；
//在单击位置时放置标记
marker.position.set（target.point.x，target.point.y，target.point.z）；
场景。添加（标记）；
applyWireframe（）；
//显示调色板
TweenLite.to（$（'.palete'），0.75，{left:'0'，ease:Power4.easeOut}）；
}否则{
移除线框（）；
//隐藏调色板
TweenLite.to（$（'.palete'），0.75，{left:'-100px'，ease:Power4.easeOut}）；
}
}
请求动画帧（渲染）；
cameraControl.update（）；
渲染器。渲染（场景、摄影机）；
}
//为选定零件应用线框
函数applyWireframe（）{
var wireframeObject=scene.getObjectByName（'ObjectModel3D'，true）；
wireframeObject.traverse（函数（子函数）{
if（三个.Mesh的子实例）{
儿童垫