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
122
123
124
| import * as THREE from 'three';
const {
REVISION,
Scene,
PerspectiveCamera,
WebGLRenderer,
BoxGeometry,
MeshBasicMaterial,
Mesh
} = THREE
function getScene({
options = {},
elements = []
}) {
const scene = new Scene();
Object.entries(options).forEach(([key, val]) => {
scene[key] = val;
})
elements.forEach(item => {
scene.add(item);
})
return scene;
}
function getCamera() {
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
camera.lookAt(0, 0, 0);
return camera;
}
function getRender() {
const renderer = new WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
return renderer;
}
function getBasicCube() {
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshBasicMaterial({ color: 0x00ff00 });
const cube = new Mesh(geometry, material);
cube.position.set(0, 0, 0);
return cube;
}
function run(params, callback) {
const { camera, render, scene } = params;
function animate() {
if (callback) {
callback();
}
requestAnimationFrame(animate);
render.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render.setSize(window.innerWidth, window.innerHeight);
});
}
export {
getScene,
getRender,
getCamera,
getBasicCube,
run
}
import {
getScene,
getRender,
getCamera,
getBasicCube,
run
} from '@/core/Factory'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export const go = () => {
const camera = getCamera();
const render = getRender();
document.querySelector("#box").appendChild(render.domElement);
const cube = getBasicCube();
const scene = getScene({
elements: [camera, cube]
});
const rotateCube = () => {
cube.rotation.x += 0.005;
cube.rotation.y += 0.005;
}
run({ scene, render, camera }, rotateCube)
const control = new OrbitControls(camera, render.domElement);
control.target.set(0, 0, 0);
}
import { useEffect } from 'react';
import { go } from '@/component/demo2';
export default function IndexPage() {
useEffect(() => {
go();
return () => {
Array.from(document.querySelector("#box")?.children).forEach(item => item.remove());
}
}, [])
return (
<div id="box"></div>
);
}
|