1
私はthreejsの例であるwebgl_interactive_draggablecubes.htmlに従います。私のプロジェクトはThreejsを使ってコンテナの積載計画を立てることです。だから、私は境界線で立体的な立体を作りたい。私たちは国境の違いの有無にかかわらず見ることができます。 /image attachement/
、
Javascript threejs境界線付きの3D立体描画立体キュー
Iマルチ材料を使用することができ、私は少し/ 1/
ように変更コードが、その後私のドラッグアンドドロップが壊れています。 Create Geometry3のコードスニペットにはコメントがあります。
私の質問は、境界線を持つ立体的な立方体を作る方法と同時にドラッグアンドドロップすることができますか？
/1/
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - draggable cubes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script>
var container, stats;
var camera, controls, scene, renderer;
var cubes = [];
var plane = new THREE.Plane();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
intersection = new THREE.Vector3(),
INTERSECTED, SELECTED;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.z = 10;
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x505050));
var geometry = new THREE.BoxGeometry(2, 5, 7);
var hex = 0xff0000;
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faces[ i ].color.setHex(hex);
}
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5,wireframe:true });
var cube = new THREE.Mesh(geometry, material);
cubes.push(cube);
var geometry2 = new THREE.BoxGeometry(2,4, 5);
var hex2 = 0x009fff;
for (var i = 0; i < geometry2.faces.length; i++) {
geometry2.faces[ i ].color.setHex(hex2);
}
var material2 = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5,wireframe:true });
var cube2 = new THREE.Mesh(geometry2, material2);
cubes.push(cube2);
var geometry3 = new THREE.BoxGeometry(1,3,4);
var hex3 = 0x0f0ff0;
for (var i = 0; i < geometry3.faces.length; i++) {
geometry3.faces[ i ].color.setHex(hex3);
}
/* var darkMaterial3= new THREE.MeshBasicMaterial({ color: 0xffffcc });
var wireframeMaterial3= new THREE.MeshBasicMaterial({ color: 0x0f0000, wireframe: true, transparent: false });
var multiMaterial3= [ darkMaterial3, wireframeMaterial3 ];
var cube3 = THREE.SceneUtils.createMultiMaterialObject(geometry3,multiMaterial3);*/
var material3 = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5,wireframe:true });
var cube3 = new THREE.Mesh(geometry3, material3);
cubes.push(cube3);
scene.add(cube);
scene.add(cube2);
scene.add(cube3);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
container.appendChild(renderer.domElement);
stats = new Stats();
container.appendChild(stats.dom);
renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
if (SELECTED) {
if (raycaster.ray.intersectPlane(plane, intersection)) {
SELECTED.position.copy(intersection.sub(offset));
}
return;
}
var intersects = raycaster.intersectObjects(cubes);
if (intersects.length > 0) {
if (INTERSECTED != intersects[ 0 ].object) {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
plane.setFromNormalAndCoplanarPoint(
camera.getWorldDirection(plane.normal),
INTERSECTED.position);
}
container.style.cursor = 'pointer';
} else {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = null;
container.style.cursor = 'auto';
}
}
function onDocumentMouseDown(event) {
event.preventDefault();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(cubes);
if (intersects.length > 0) {
controls.enabled = false;
SELECTED = intersects[ 0 ].object;
if (raycaster.ray.intersectPlane(plane, intersection)) {
offset.copy(intersection).sub(SELECTED.position);
}
container.style.cursor = 'move';
}
}
function onDocumentMouseUp(event) {
event.preventDefault();
controls.enabled = true;
if (INTERSECTED) {
SELECTED = null;
}
container.style.cursor = 'auto';
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
エクセレント!!迅速で正確な答え。どのように線太字にするには？線幅を広げると最大値をとっているようです。 – user84592
でもヒントがあります！ – user84592
これは良い答えです！ – user84592