Language: English | 中文简体
Two-sided texture material.
Make sure that the version of
threejs
is greater thanr118
, otherwise the shader code will error because the version ofglsl
is too low.
-
lightweight and easy to use
-
based on
threejs
native material -
support
typescript
npm i @dreamoment/two-sided-material
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import TwoSidedMaterial from '@dreamoment/two-sided-material'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const ambientLight = new THREE.AmbientLight(0xffffff)
const directionalLight = new THREE.DirectionalLight(0xffffff)
directionalLight.position.set(1, 1, 1)
scene.add(ambientLight, directionalLight)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
camera.position.z += 5
let textureLoader = new THREE.TextureLoader()
const textureFront = textureLoader.load('./images/red.png')
const textureBack = textureLoader.load('./images/blue.png')
const twoSidedMaterial = new TwoSidedMaterial(new THREE.MeshStandardMaterial())
twoSidedMaterial.setTextureFront(textureFront)
twoSidedMaterial.setTextureBack(textureBack)
// or
// twoSidedMaterial.setTextures(textureFront, textureBack)
const material = twoSidedMaterial.getMaterial()
const plane = new THREE.Mesh(new THREE.PlaneGeometry(), material)
scene.add( plane )
const animate = () => {
controls.update()
renderer.render(scene, camera)
}
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
})
renderer.setAnimationLoop(animate)
type MaterialEnabled = THREE.LineBasicMaterial |
THREE.MeshBasicMaterial |
THREE.MeshDepthMaterial |
THREE.MeshDistanceMaterial |
THREE.MeshLambertMaterial |
THREE.MeshMatcapMaterial |
THREE.MeshPhongMaterial |
THREE.MeshPhysicalMaterial |
THREE.MeshStandardMaterial |
THREE.MeshToonMaterial |
THREE.PointsMaterial |
THREE.SpriteMaterial
new TwoSidedMaterial(material: MaterialEnabled)
Gets the threejs
material instance.
getMaterial(): MaterialEnabled
Set the texture for the front of the material.
setTextureFront(texture: THREE.Texture): void
Set the texture on the opposite side of the material.
setTextureBack(texture: THREE.Texture): void
Set the textures for the front and back of the material.
setTextures(textureFront: THREE.Texture, textureBack: THREE.Texture): void