1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| <html>
<head>
<style>
.tag{
color: blue;
font-size: 50px;
background-color: aqua;
}
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"threex": "https://cdn.jsdelivr.net/npm/[email protected]/",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
// 导入轨道控制器
var my3d= document.getElementById("my3d")
var my3dinnner= document.getElementById("my3dinnner")
var text1= document.getElementById("text1")
// import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import {CSS3DObject, CSS3DRenderer, CSS3DSprite} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/renderers/CSS3DRenderer.js";
function create3DSprite(name) {
// 创建div元素(作为标签)
let div = document.createElement('div');
div.innerHTML = name;
div.className = "tag"
// div.classList.add('tag');
let label = new CSS3DSprite(div);
div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
label.scale.set(0.01, 0.01, 0.01);
return label;
}
window.onload=()=>{
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,my3d.clientWidth / my3d.clientHeight,0.1,1000
);
//https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/renderers/CSS2DRenderer.js
const MyCss3Renderer = new CSS3DRenderer();
MyCss3Renderer.setSize(my3d.clientWidth ,my3d.clientHeight);
MyCss3Renderer.domElement.style.position = 'absolute';
MyCss3Renderer.domElement.style.top = '0px';
MyCss3Renderer.domElement.style.left = '0px';
MyCss3Renderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(MyCss3Renderer.domElement);
camera.position.set(0, 0, 10);
scene.add(camera);
const geometryA = new THREE.BoxGeometry(10, 1, 1); // 举例：使用盒子几何体
const materialA = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const objectA = new THREE.Mesh(geometryA, materialA);
scene.add(objectA); // 将物体 A 添加到场景
objectA.position.set(-2,0,0)//故意把A不妨到世界原点
// 创建物体 B
const geometryB = new THREE.BoxGeometry(1111, 1, 10); // 举例：使用盒子几何体
const materialB = new THREE.MeshBasicMaterial({ color: 0x00FF00 }); // 设置颜色为红色
const objectB = new THREE.Mesh(geometryB, materialB);
// 计算物体 B 相对于物体 A 的位置，使其居中
const relativePositionB = new THREE.Vector3(0, 0, 0); // 通过调整这些值来设置 B 相对于 A 的位置
objectB.position.set(5,0,0)//故意把设置到其他为止
objectB.scale.set(0.0001,1,1)
// 设置物体 B 的位置中间
objectB.position.copy(relativePositionB);
// 将物体 B 添加为物体 A 的子物体
objectA.add(objectB);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize( my3d.clientWidth, my3d.clientHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
my3dinnner.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', ()=>{
renderer.render(scene, camera)
MyCss3Renderer.render(scene, camera)
})
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
var css3DObject = create3DSprite("abcdefg");
let pos1 = new THREE.Vector3();
objectA.getWorldPosition(pos1);
css3DObject.position.copy(pos1);
scene.add(css3DObject);
function render() {
MyCss3Renderer.render(scene, camera)
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
window.addEventListener('resize', function (e) {
console.log("resize")
MyCss3Renderer.setSize(my3d.clientWidth, my3d.clientHeight);
renderer.setSize( my3d.clientWidth, my3d.clientHeight);
text1.innerText=my3d.clientWidth+" x"+my3d.clientHeight
});
}
</script>
</head>
<body>
<div style="display: flex; width: 100%;height: 100%;">
<div id="my3d" style="flex: 1; text-align: center; background-color: #3498db; color: #fff;">
<div id="my3dinnner" style="background-color: yellow; width: 100%;height:100%"></div>
</div>
<div style="flex: 1; text-align: center; background-color: #e74c3c; color: #fff;height: 100%;">TEST
<label id="text1">尺寸信息，改变窗口后打印</label>
</div>
</div>
</body>
</html>
|
alipay
wechat