Link Gốc: http://demo.vcc.vn/threejs/show.html
Mã HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Object</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="screen"></div>
<div class="panel"></div>
<script type="module">
import * as THREE from './jsm/three.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { Helper, createClass } from './js/modules/helper.js';
import App from './js/app.module.js';
// tạo class
// có thể dùng var Damaged = createClass('Damaged', false).extends(App); khi này sẽ không tạo biến trong window
createClass('Demo').extends(App)({
// khai báo các thuộc tính hoặc phương thức
version: 1
});
var DemoOptions = {{DataObject}}
// tạo đối tượng với tham só là dữ liệu được lưu trong database
var demo = new Demo(DemoOptions);
demo.on('ready', function () {
var scene = this.scene, renderer = this.renderer;
var model;
})
</script>
</body>
</html>
Data:
var DataObject = {
// đối tượng đổ dom element
selector: '#screen',
autoStart: true,
renderer: {
params: { antialias: true },
shadowMap: {
enabled: true
},
outputEncoding: THREE.sRGBEncoding
},
composer: {
effect: 'bloom'
},
scene: {
background: {
type: 'file',
format: "hdr",
file: "textures/0000.hdr"
}
},
camera: {
fov: 45,
near: 1,
far: 100,
position: {
x: 2,
y: 2,
z: 3
},
// "@lookAt": [0, 1, 0]
},
controls: {
type: "orbit",
autoUpdateScene: true,
maxPolarAngle: Math.PI * 0.52,
maxDistance: 160
},
lights: [
{
type: "Hemisphere",
params: [0xffffff, 0x444444],
position: {
x: 0,
y: 20,
z: 0
}
},
{
type: "Direction",
params: [0xffffff],
position: {
x: 3,
y: 10,
z: -10
},
castShadow: true,
shadow: {
camera: {
top: 5,
bottom: -5,
left: -5,
right: 5,
near: 0.1,
far: 40
}
}
},
],
meshes: [
{
geometry: {
type: 'box',
params: {
width: 2000,
height: 2000,
depth: 2000
}
},
material: {
type: 'basic',
params: {
color: 0xa0a0a0,
},
side: THREE.BackSide
}
},
{
geometry: {
type: 'PlaneBuffer',
params: {
width: 1000,
height: 1000
}
},
material: {
type: "phong",
params: {
color: 0x999999,
depthWrite: false
}
},
position: {
y: -1
},
rotation: {
x: - Math.PI / 2,
},
receiveShadow: true
},
],
// đối tượng chính để quản lý
main: {
type: "mesh",
params: {
geometry: {
type: "boxbuffer",
width: 2,
height: 2,
depth: 2
},
material: {
type: "boximages",
path: 'textures/cube/pisa/',
files: [
'px.png',
'nx.png',
'py.png',
'ny.png',
'pz.png',
'nz.png'
],
color: 0xffffff
},
},
props: {
castShadow: true,
position: {
// y:1
}
},
handler: {
// tự dộng xoay
rotation: {
x: {
action: "inc",
value: 0.01
},
y: {
action: "inc",
value: 0.01
}
}
},
// các chất liệu để thay thế
materials: [
{
type: 'lamber',
children: [
{
color: 0xff0000,
map: {
$three: 'texture',
file: '/threejs/img/1.jpg'
}
},
{
color: 0x00ff00,
map: {
$three: 'texture',
file: '/threejs/img/2.png'
}
},
{
color: 0x0000ff,
map: {
$three: 'texture',
file: '/threejs/img/3.png'
}
},
{
color: 0xff00ff,
map: {
$three: 'texture',
file: '/threejs/img/4.jpg'
}
},
{
color: 0x04d0ff,
map: {
$three: 'texture',
file: '/threejs/img/5.jpg'
}
},
{
color: 0xad0fd2,
map: {
$three: 'texture',
file: '/threejs/img/6.jpg'
}
},
]
},
{
type: "boximages",
path: 'textures/cube/pisa/',
files: [
'px.png',
'nx.png',
'py.png',
'ny.png',
'pz.png',
'nz.png'
],
color: 0xffffff
},
{
color: 0xff0000,
map: {
$three: 'texture',
file: '/threejs/img/1.jpg'
}
},
{
color: 0x00ff00,
// map: {
// $three: 'texture',
// file: '/threejs/img/2.png'
// }
},
{
color: 0x0000ff,
// map: {
// $three: 'texture',
// file: '/threejs/img/3.png'
// }
},
{
type: 'lamber',
children: [
{
// color: 0xff0000,
map: {
$three: 'texture',
file: '/threejs/img/1.jpg'
}
},
{
// color: 0x00ff00,
map: {
$three: 'texture',
file: '/threejs/img/2.png'
}
},
{
// color: 0x0000ff,
map: {
$three: 'texture',
file: '/threejs/img/3.png'
}
},
{
// color: 0xff00ff,
map: {
$three: 'texture',
file: '/threejs/img/4.jpg'
}
},
{
// color: 0x04d0ff,
map: {
$three: 'texture',
file: '/threejs/img/5.jpg'
}
},
{
// color: 0xad0fd2,
map: {
$three: 'texture',
file: '/threejs/img/6.jpg'
}
},
]
},
{
color: 0xfafafa,
map: {
$three: 'texture',
file: '/threejs/img/4.jpg'
}
},
{
color: 0x04d0ff,
map: {
$three: 'texture',
file: '/threejs/img/5.jpg'
}
},
{
color: 0xad0fd2,
// map: {
// $three: 'texture',
// file: '/threejs/img/6.jpg'
// }
},
]
}
};
