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 | import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module'
const scene1 = new THREE.Scene()
const scene2 = new THREE.Scene()
const axesHelper1 = new THREE.AxesHelper(5)
scene1.add(axesHelper1)
const axesHelper2 = new THREE.AxesHelper(5)
scene2.add(axesHelper2)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
camera.position.z = 1
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
new OrbitControls(camera, renderer.domElement)
const planeGeometry1 = new THREE.PlaneGeometry()
const planeGeometry2 = new THREE.PlaneGeometry()
const texture1 = new THREE.TextureLoader().load('img/grid.png')
const texture2 = new THREE.TextureLoader().load('img/grid.png')
const material1 = new THREE.MeshBasicMaterial({ map: texture1 })
const material2 = new THREE.MeshBasicMaterial({ map: texture2 })
texture2.minFilter = THREE.NearestFilter
texture2.magFilter = THREE.NearestFilter
const plane1 = new THREE.Mesh(planeGeometry1, material1)
const plane2 = new THREE.Mesh(planeGeometry2, material2)
scene1.add(plane1)
scene2.add(plane2)
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
render()
}
const options = {
minFilters: {
NearestFilter: THREE.NearestFilter,
NearestMipMapLinearFilter: THREE.NearestMipMapLinearFilter,
NearestMipMapNearestFilter: THREE.NearestMipMapNearestFilter,
'LinearFilter ': THREE.LinearFilter,
'LinearMipMapLinearFilter (Default)': THREE.LinearMipMapLinearFilter,
LinearMipmapNearestFilter: THREE.LinearMipmapNearestFilter,
},
magFilters: {
NearestFilter: THREE.NearestFilter,
'LinearFilter (Default)': THREE.LinearFilter,
},
}
const gui = new GUI()
const textureFolder = gui.addFolder('THREE.Texture')
textureFolder
.add(texture2, 'minFilter', options.minFilters)
.onChange(() => updateMinFilter())
textureFolder
.add(texture2, 'magFilter', options.magFilters)
.onChange(() => updateMagFilter())
textureFolder.open()
function updateMinFilter() {
texture2.minFilter = Number(texture2.minFilter)
texture2.needsUpdate = true
}
function updateMagFilter() {
texture2.magFilter = Number(texture2.magFilter)
texture2.needsUpdate = true
}
const stats = Stats()
document.body.appendChild(stats.dom)
function animate() {
requestAnimationFrame(animate)
render()
stats.update()
}
function render() {
renderer.setScissorTest(true)
renderer.setScissor(0, 0, window.innerWidth / 2 - 2, window.innerHeight)
renderer.render(scene1, camera)
renderer.setScissor(
window.innerWidth / 2,
0,
window.innerWidth / 2 - 2,
window.innerHeight
)
renderer.render(scene2, camera)
renderer.setScissorTest(false)
}
animate()
|
