Three.js 可交互操控的3D电视机

真实的电视机模型和屏幕播放动画模拟。学习如何在threejs中操控对象。

three, tv, 交互操作

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5918
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Post processing config mannnnnn
const postProcessingConfig = {
  active: true,
  passes: [
    {
      active: true,
      constructor: new helpers.passes.BloomUnrealPass({
        resolution: new THREE.Vector2(256, 256),
        strength: 1.5,
        radius: 1.3,
        threshold: 0.7
      })
    },
    {
      active: true,
      constructor: new helpers.passes.PostPass()
    }
  ]
}

// Asset loader yoooo
const assets = [
  // Model
  { id: 'tvModel', url: '/uploads/161101/tv/tv.awd', type: 'bin' },
  // Environment
  { id: 'envNX', url: '/uploads/161101/tv/nx.hdr', type: 'bin' },
  { id: 'envNY', url: '/uploads/161101/tv/ny.hdr', type: 'bin' },
  { id: 'envNZ', url: '/uploads/161101/tv/nz.hdr', type: 'bin' },
  { id: 'envPX', url: '/uploads/161101/tv/px.hdr', type: 'bin' },
  { id: 'envPY', url: '/uploads/161101/tv/py.hdr', type: 'bin' },
  { id: 'envPZ', url: '/uploads/161101/tv/pz.hdr', type: 'bin' },
  // Model maps
  { id: 'tvAlbedo', url: '/uploads/161101/tv/albedo.jpg', type: 'jpg' },
  { id: 'tvAO', url: '/uploads/161101/tv/ao.jpg', type: 'jpg' },
  { id: 'tvError', url: '/uploads/161101/tv/error.jpg', type: 'jpg' },
  { id: 'tvMetalness', url: '/uploads/161101/tv/metalness.jpg', type: 'jpg' },
  { id: 'tvNormal', url: '/uploads/161101/tv/normal.jpg', type: 'jpg' },
  { id: 'tvRoughness', url: '/uploads/161101/tv/roughness.jpg', type: 'jpg' },
  // Ground maps
  { id: 'groundAlbedo', url: '/uploads/161101/tv/g_albedo.jpg', type: 'jpg' },
  { id: 'groundMetalness', url: '/uploads/161101/tv/g_metalness.jpg', type: 'jpg' },
  { id: 'groundNormal', url: '/uploads/161101/tv/g_normal.jpg', type: 'jpg' },
  { id: 'groundRoughness', url: '/uploads/161101/tv/g_roughness.jpg', type: 'jpg' }
]

class Ground extends THREE.Object3D {

/**
   * constructor method
   */
  constructor ({ cannonMaterial, loader }) {
    super()

const textureRepeat = 6
    const planeSize = new THREE.Vector2(50, 50)

this.loader = loader

this.geometry = new THREE.PlaneGeometry(planeSize.x, planeSize.y)

this.material = new THREE.MeshStandardMaterial()
    this.cannonMaterial = cannonMaterial

this.material.roughness = 1
    this.material.metalness = 1

this.material.map = new THREE.Texture(this.loader.get('groundAlbedo'))
    this.material.roughnessMap = new THREE.Texture(this.loader.get('groundRoughness'))
    this.material.metalnessMap = new THREE.Texture(this.loader.get('groundMetalness'))
    this.material.normalMap = new THREE.Texture(this.loader.get('groundNormal'))

this.material.map.wrapS = this.material.map.wrapT = THREE.RepeatWrapping
    this.material.roughnessMap.wrapS = this.material.roughnessMap.wrapT = THREE.RepeatWrapping
    this.material.metalnessMap.wrapS = this.material.metalnessMap.wrapT = THREE.RepeatWrapping
    this.material.normalMap.wrapS = this.material.normalMap.wrapT = THREE.RepeatWrapping

this.material.map.repeat.set(textureRepeat, textureRepeat)
    this.material.roughnessMap.repeat.set(textureRepeat, textureRepeat)
    this.material.metalnessMap.repeat.set(textureRepeat, textureRepeat)
    this.material.normalMap.repeat.set(textureRepeat, textureRepeat)

this.material.map.needsUpdate = this.material.roughnessMap.needsUpdate = this.material.metalnessMap.needsUpdate = this.material.normalMap.needsUpdate = true

this.body = new CANNON.Body({
      mass: 0,
      shape: new CANNON.Plane(),
      material: this.cannonMaterial
    })

this.mesh = new THREE.Mesh(this.geometry, this.material)
    this.mesh.receiveShadow = true
    this.mesh.rotation.x = -Math.PI / 2

this.body.quaternion.copy(this.mesh.quaternion)
    this.mesh.position.copy(this.body.position)

this.add(this.mesh)
  }
}

class ScreenMaterial extends THREE.MeshStandardMaterial {

constructor (parameters) {
    super(parameters)

this.type = 'ShaderMaterial'

const baseShader = THREE.ShaderLib.physical

const baseUniforms = THREE.UniformsUtils.clone(baseShader.uniforms)
    const uniforms = {
      uTime: { value: 0.0 },
      uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
      uErrorTexture: { value: null },
      uGrabbed: { value: false }
    }

this.uniforms = THREE.UniformsUtils.merge([ baseUniforms, uniforms ])

this.vertexShader = document.getElementById( 'screen_vertex_shader' ).textContent
    this.fragmentShader = document.getElementById( 'screen_fragment_shader' ).textContent

this.resize = this.resize.bind(this)
    helpers.Window.add(this.resize)
  }

resize(width, height) {
    this.uniforms.uResolution.value.set(width, height)
  }

update (time) {
    this.uniforms.uTime.value = time
  }
}

class TV extends THREE.Object3D {

/**
   * constructor method
   */
  constructor ({ renderer, cannonMaterial, loader }) {
    super()

this.renderer = renderer
    this.cannonMaterial = cannonMaterial
    this.loader = loader

this.awdLoader = new helpers.AWDLoader()
    this.model = this.awdLoader.parse(this.loader.get('tvModel'))

this.intersect = false

this.body = new CANNON.Body({
      mass: 4,
      position: new CANNON.Vec3(0, 10, 0),
      shape: new CANNON.Box(new CANNON.Vec3(1.4, 1.4, 2.15)),
      material: this.cannonMaterial
    })

this.resetLimit = 20

this.baseRotation = this.body.quaternion.clone()
    this.bind()
    this.initModel()
  }

/**
   * bind method
   */
  bind () {
    this.onKeyDown = ::this.onKeyDown
    document.addEventListener('keydown', this.onKeyDown, false)
  }

/**
   * onKeyDown method
   */
  onKeyDown (event) {
    if(event.keyCode === 82){
      this.reset()
    }
  }

/**
   * reset method
   */
  reset () {
    this.body.sleep()
    this.body.position.set(0, 10, 0)
    this.body.quaternion = this.baseRotation.clone()
    this.body.wakeUp()
  }

/**
   * initModel method
   */
  initModel () {
    this.tvMesh = this.model.children[0]
    this.screenMesh = this.model.children[1]

const errorMap = new THREE.Texture(this.loader.get('tvError'))
    const albedoMap = new THREE.Texture(this.loader.get('tvAlbedo'))
    const roughnessMap = new THREE.Texture(this.loader.get('tvRoughness'))
    const metalnessMap = new THREE.Texture(this.loader.get('tvMetalness'))
    const normalMap = new THREE.Texture(this.loader.get('tvNormal'))
    const aoMap = new THREE.Texture(this.loader.get('tvAO'))

errorMap.needsUpdate = albedoMap.needsUpdate = roughnessMap.needsUpdate = metalnessMap.needsUpdate = normalMap.needsUpdate = aoMap.needsUpdate = true

this.tvMesh.material = new THREE.MeshStandardMaterial()
    this.screenMesh.material = new ScreenMaterial()
    this.screenMesh.material.uniforms.uErrorTexture.value = errorMap

this.model.traverse(mesh => {
      if(mesh instanceof THREE.Mesh) {
        mesh.material.roughness = 1
        mesh.material.metalness = 1

mesh.material.map = albedoMap
        mesh.material.roughnessMap = roughnessMap
        mesh.material.metalnessMap = metalnessMap
        mesh.material.normalMap = normalMap
        mesh.material.aoMap = aoMap

mesh.material.map.wrapS = mesh.material.map.wrapT = THREE.RepeatWrapping
        mesh.material.roughnessMap.wrapS = mesh.material.roughnessMap.wrapT = THREE.RepeatWrapping
        mesh.material.metalnessMap.wrapS = mesh.material.metalnessMap.wrapT = THREE.RepeatWrapping
        mesh.material.normalMap.wrapS = mesh.material.normalMap.wrapT = THREE.RepeatWrapping
        mesh.material.aoMap.wrapS = mesh.material.aoMap.wrapT = THREE.RepeatWrapping

mesh.receiveShadow = true
        mesh.castShadow = true
      }
    })

this.model.scale.multiplyScalar(0.15)

this.model.rotation.y = - Math.PI

this.model.position.copy(this.body.position)
    this.body.quaternion.copy(this.model.quaternion)
    this.baseRotation = this.body.quaternion.clone()
  }

update (time) {
    this.model.position.copy(this.body.position)
    this.model.quaternion.copy(this.body.quaternion)
    this.screenMesh.material.update(time)

if (Math.abs(this.body.position.x) > this.resetLimit ||
      Math.abs(this.body.position.z) > this.resetLimit) {
      this.reset()
    }
  }
}

class Renderer extends THREE.WebGLRenderer {

/**
   * constructor method
   * @param {object} options Options
   */
  constructor (options = { antialias: true, alpha: true }) {
    super(options)

this.setSize(window.innerWidth, window.innerHeight)
    this.setPixelRatio(window.devicePixelRatio)
    this.setClearColor(0x000000, 1.0)

this.gammaInput = true
		this.gammaOutput = true

this.toneMapping = THREE.ReinhardToneMapping
    this.toneMappingExposure = 1.2

this.shadowMap.enabled = true
    this.shadowMap.type = THREE.PCFShadowMap

this.resize = this.resize.bind(this)
    helpers.Window.add(this.resize)
  }

/**
   * resize method
   * @param {number} width  Width
   * @param {number} height Height
   */
  resize (width, height) {
    this.setSize(width, height)
  }
}

class Camera extends THREE.PerspectiveCamera {

/**
   * constructor method
   */
  constructor (fov, aspect, near, far) {
    super(fov, aspect, near, far)

this.controls = new helpers.OrbitControls(this, document.getElementById('webgl-container'))
    this.controls.enabled = false

this.controls.enableZoom = false
    this.controls.enablePan = false

this.controls.autoRotate = false
    this.controls.autoRotateSpeed = 3

this.controls.minPolarAngle = 0
    this.controls.maxPolarAngle = Math.PI / 2

this.controls.target.y = 1.3

this.GUI = helpers.GUI

this.bind()
  }

/**
   * bind method
   */
  bind () {
    this.resize = this.resize.bind(this)
    this.onKeyUp = this.onKeyUp.bind(this)
    this.onKeyDown = this.onKeyDown.bind(this)

helpers.Window.add(this.resize)
    document.addEventListener('keyup', this.onKeyUp, false)
    document.addEventListener('keydown', this.onKeyDown, false)
  }

/**
   * onKeyUp method
   */
  onKeyUp () {
    this.controls.enabled = false
    document.body.classList.remove('cursor-move')
  }

/**
   * onKeyDowb method
   */
  onKeyDown (event) {
    if (event.keyCode === 16 || event.keyCode === 32) {
      this.controls.enabled = true
      document.body.classList.add('cursor-move')
    }
  }

/**
   * update method
   * @param {number} delta Delta
   */
  update (delta) {
    this.controls.update(delta)
  }

/**
   * resize method
   * @param {number} width  Width
   * @param {number} height Height
   */
  resize (width, height) {
    this.aspect = width / height
    this.updateProjectionMatrix()
  }
}

class Scene extends THREE.Scene {

/**
   * constructor method
   * @param {Renderer} Renderer Renderer instance
   * @param {Camera}   Camera   Camera instance
   * @param {Loader}   Loader   Loader
   */
  constructor (Renderer, Camera, Loader) {
    super()

this.renderer = Renderer
    this.camera = Camera
    this.loader = Loader

this.postProcessing = new helpers.PostProcessing(this, this.camera, this.renderer, postProcessingConfig)
    this.GUI = helpers.GUI

this.clock = new helpers.Clock()

this.mousePos = new THREE.Vector2()
    this.raycaster = new THREE.Raycaster()

this.clock = new helpers.Clock()
    this.clock.fixedDelta = 1 / 60

this.world = new CANNON.World()
    this.world.quatNormalizeSkip = 0
    this.world.quatNormalizeFast = false

this.world.gravity.set(0, -13, 0)
    this.world.broadphase = new CANNON.NaiveBroadphase()

this.cannonMeshes = ['tv', 'ground']
    this.cannonMaterials = {}

this.joint = new CANNON.Body({
      mass: 0,
      shape: new CANNON.Sphere(0.1)
    })

this.joint.collisionFilterGroup = 0
    this.joint.collisionFilterMask = 0

this.intersects = []
    this.grabbed = false

this.bind()
    this.createScene()
  }

/**
   * bind method
   */
  bind() {
    this.handleMouseMove = ::this.handleMouseMove
    this.handleMouseUp = ::this.handleMouseUp
    this.handleMouseDown = ::this.handleMouseDown

document.addEventListener('mousemove', this.handleMouseMove, false)
    document.addEventListener('mouseup', this.handleMouseUp, false)
    document.addEventListener('mousedown', this.handleMouseDown, false)

document.addEventListener('touchmove', this.handleMouseMove, false)
    document.addEventListener('touchstart', this.handleMouseDown, false)
    document.addEventListener('touchend', this.handleMouseUp, false)
  }

/**
   * createScene method
   */
  createScene () {
    const fog = new THREE.FogExp2(0x000000, 0.18)
    this.fog = fog

this.setCannonMaterials()
    this.initMeshes()
    this.initLights()
    this.initHdrTexture()

this.render = ::this.render
    this.raf = requestAnimationFrame(this.render)
  }

/**
   * initLights method
   */
  initLights () {
    this.hemisphereLight = new THREE.HemisphereLight(0xc4e8ff, 0x7598af, 0.5)
    this.add(this.hemisphereLight)

this.spotLight = new THREE.SpotLight(0xe8e8e8, 6, 0, Math.PI / 10, 1, 2)
    this.spotLight.castShadow = true
    this.spotLight.shadow.mapSize.width = this.spotLight.shadow.mapSize.height = 1024
    this.spotLight.shadow.bias = 0.01
    this.spotLight.position.set(5, 18, 3)

this.add(this.spotLight)
    this.add(this.spotLight.target)
  }

/**
   * initMeshes method
   */
  initMeshes () {
    this.ground = new Ground({
      cannonMaterial: this.cannonMaterials.ground,
      loader: this.loader
    })

this.add(this.ground.mesh)
    this.world.addBody(this.ground.body)

this.tv = new TV({
      renderer: this.renderer,
      cannonMaterial: this.cannonMaterials.tv,
      loader: this.loader
    })

this.world.addBody(this.tv.body)
    this.add(this.tv.model)
  }

/**
   * initHdrTexture method
   */
  initHdrTexture () {
    const hdrUrls = this.genCubeUrls('/uploads/161101/tv/', '.hdr')

const hdrTextureCubeLoader = new THREE.HDRCubeTextureLoader()
      .load(THREE.UnsignedByteType, hdrUrls, hdrCubeMap => {
        const pmremGenerator = new THREE.PMREMGenerator(hdrCubeMap)
        pmremGenerator.update(this.renderer)

const pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods)
        pmremCubeUVPacker.update(this.renderer)

const hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget
        const texture = hdrCubeRenderTarget.texture

this.tv.tvMesh.material.envMap = this.tv.screenMesh.material.envMap = this.ground.material.envMap = texture
        this.tv.tvMesh.material.needsUpdate = this.tv.screenMesh.material.needsUpdate = this.ground.material.needsUpdate = true
      })
  }

/**
   * genCubeUrls method
   */
  genCubeUrls (prefix, postfix) {
    return [
      prefix + 'px' + postfix, prefix + 'nx' + postfix,
      prefix + 'py' + postfix, prefix + 'ny' + postfix,
      prefix + 'pz' + postfix, prefix + 'nz' + postfix
    ]
  }

/**
   * setCannonMaterials method
   */
  setCannonMaterials () {
    for (let i = 0; i < this.cannonMeshes.length; i++) {
      this.cannonMaterials[ this.cannonMeshes[ i ] ] = new CANNON.Material()
    }

const contactTvModelGround = new CANNON.ContactMaterial(this.cannonMaterials.tv, this.cannonMaterials.ground, {
      friction: 0.5,
      restitution: 0.05
    })

this.world.addContactMaterial(contactTvModelGround)
  }

/**
   * handleMouseMove method
   */
  handleMouseMove (event) {

const clientX = event.clientX || event.touches[0].clientX
    const clientY = event.clientY || event.touches[0].clientY

this.mousePos.x = (clientX / window.innerWidth) * 2 - 1
    this.mousePos.y = -(clientY / window.innerHeight) * 2 + 1

this.raycast()

if(this.grabbed) {
      const point = this.projectOnPlane(this.grabPoint)
  		this.joint.position.copy(point)
  		this.constraint.update()
    }
  }

/**
   * handleMouseUp method
   */
  handleMouseUp () {
    this.removeTvConstraint()
  }

/**
   * handleMouseDown method
   */
  handleMouseDown () {
    if(this.intersects.length > 0) {
      this.addTvConstraint()
    }
  }

/**
   * addTvConstraint method
   */
  addTvConstraint () {
    this.grabbed = true
    const intersect = this.intersects[0]
    this.grabPoint = intersect.point

const vector = new CANNON.Vec3().copy(intersect.point).vsub(this.tv.body.position)
		const pivot  = this.tv.body.quaternion.inverse().vmult(vector)

this.joint.position.copy(intersect.point)
		this.constraint = new CANNON.PointToPointConstraint(this.tv.body, pivot, this.joint, new CANNON.Vec3(0, 0, 0))
		this.world.addConstraint(this.constraint)

this.tv.screenMesh.material.uniforms.uGrabbed.value = true

document.body.classList.add('cursor-grabbing')
  }

/**
   * removeTvConstraint method
   */
  removeTvConstraint() {
    this.grabbed = false
    this.world.removeConstraint( this.constraint )

this.tv.screenMesh.material.uniforms.uGrabbed.value = false

document.body.classList.remove('cursor-grab')
    document.body.classList.remove('cursor-grabbing')
  }

/**
   * projectOnPlane method
   */
  projectOnPlane(position) {
    const direction = position.clone().sub(this.camera.position).normalize()
		const plane = new THREE.Plane(direction, -direction.x * position.x - direction.y * position.y - direction.z * position.z)
		return this.raycaster.ray.intersectPlane(plane)
  }

/**
   * raycast method
   */
  raycast () {
    this.raycaster.setFromCamera(this.mousePos, this.camera)

this.intersects = this.raycaster.intersectObjects([this.tv.model.children[0], this.tv.model.children[1]])

if(this.intersects.length > 0){
      document.body.classList.add('cursor-grab')
    } else {
      document.body.classList.remove('cursor-grab')
    }
  }

/**
   * render method
   */
  render () {
    this.world.step(this.clock.fixedDelta)

this.tv.update(this.clock.time)

this.postProcessing.update()
    this.camera.update(this.clock.delta)

requestAnimationFrame(this.render)
  };
}

class MTV {

/**
   * begin method
   */
  static begin () {
    const loadingEl = document.querySelector('.loading')
    const progress = document.querySelector('.loading__progress')
    const progressTextEl = document.querySelector('.loading__progress__text')
    const progressBarEl = document.querySelector('.loading__progress__bar')

progress.style.opacity = 1

// Renderer
    const renderer = new Renderer()
    const container = document.getElementById('webgl-container')
    container.appendChild(renderer.domElement)

// Camera
    const camera = new Camera(75, window.innerWidth / window.innerHeight, 0.1, 10000)
    camera.position.x = 2
    camera.position.y = 3
    camera.position.z = 5

if(assets.length) {
      const loader = helpers.assetsLoader({ assets, crossOrigin: 'anonymous' })
      loader.on('progress', progress => {
        progressTextEl.innerHTML = `${Math.floor(progress * 100)}%`
        progressBarEl.style.transform = `scale(${progress}, ${progress})`
      })
      loader.on('complete', assets => {
        const scene = new Scene(renderer, camera, loader)

loadingEl.style.opacity = 0
      })
      loader.start()
    } else {
      loadingEl.style.display = 'none'
      const scene = new Scene(renderer, camera)
    }
  }
}

let the = MTV.begin()

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Fira+Mono");
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Fira Mono', helvetica, arial, sans-serif;
    font-weight: 400;
    font-size: 62.5%;
}
#webgl-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 1;
    -webkit-transition: opacity 1.2s ease-out;
    transition: opacity 1.2s ease-out;
    pointer-events: none;
    z-index: 5;
}
.loading__progress {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    opacity: 0;
}
.loading__progress__text {
    font-size: 1.6rem;
    color: white;
    margin-bottom: 1rem;
}
.loading__progress__bar {
    display: inline-block;
    width: 10rem;
    height: 0.2rem;
    background-color: white;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: transform 0.25s ease-out;
    -webkit-transition: -webkit-transform 0.25s ease-out;
    transition: -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
    transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.oui,
.credits {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.credits {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;
    text-align: right;
}
.credits__title {
    font-size: 1.5rem;
    margin-bottom: 0.5absoluterem;
}
.credits__links-el {
    position: relative;
    font-size: 1rem;
    color: white;
    text-decoration: none;
    font-weight: 200;
}
.credits__links-el:before {
    position: absolute;
    content: '';
    display: block;
    left: 0;
    bottom: -0.2rem;
    width: 100%;
    height: 0.2rem;
    background: white;
    opacity: 0;
    -webkit-transform: translate3d(0, 0.3rem, 0);
    transform: translate3d(0, 0.3rem, 0);
    -webkit-transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
    transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.credits__links-el:hover {
    font-size: 1rem;
    color: white;
    text-decoration: none;
    font-weight: 200;
}
.credits__links-el:hover:before {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.credits__links-el:first-child {
    margin-right: 2rem;
}
.credits__links-el:first-child:after {
    position: absolute;
    content: '|';
    left: 100%;
    margin-left: 1rem;
    opacity: 0.8;
}
.indications {
    position: absolute;
    left: 50%;
    bottom: 20px;
    color: white;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-size: 1.1rem;
    line-height: 1.6rem;
    text-align: center;
}
.cursor-move {
    cursor: move;
}
.cursor-grab {
    cursor: -webkit-grab;
    cursor: grab;
}
.cursor-grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

HTML

<p class="indications">
  Press R to reset TV position<br>
  Hold the spacebar to enable camera rotation
</p>

uniform vec3 diffuse;
uniform vec3 emissive;
uniform float roughness;
uniform float metalness;
uniform float opacity;

uniform float uTime;
uniform vec2 uResolution;
uniform sampler2D uErrorTexture;
uniform float uGrabbed;

#ifndef STANDARD
  uniform float clearCoat;
  uniform float clearCoatRoughness;
#endif

uniform float envMapIntensity;

varying vec3 vViewPosition;

#ifndef FLAT_SHADED

varying vec3 vNormal;

#endif

#include <common>
#include <packing>
#include <color_pars_fragment>
#include <uv_pars_fragment>
#include <uv2_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <aomap_pars_fragment>
#include <lightmap_pars_fragment>
#include <emissivemap_pars_fragment>
#include <envmap_pars_fragment>
#include <fog_pars_fragment>
#include <bsdfs>
#include <cube_uv_reflection_fragment>
#include <lights_pars>
#include <lights_physical_pars_fragment>
#include <shadowmap_pars_fragment>
#include <bumpmap_pars_fragment>
#include <normalmap_pars_fragment>
#include <roughnessmap_pars_fragment>
#include <metalnessmap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>

highp float random(vec2 co)
{
    highp float a = 12.9898;
    highp float b = 78.233;
    highp float c = 43758.5453;
    highp float dt= dot(co.xy ,vec2(a,b));
    highp float sn= mod(dt,3.14);
    return fract(sin(sn) * c);
}

float customNoise( vec2 p ) {
  vec2 i = floor( p );
  vec2 f = fract( p );

vec2 u = f * f * (3.0 - 2.0 * f);

return mix( mix( dot( vec2(random( i + vec2(0.0, 0.0) )), f - vec2(0.0, 0.0) ),
                    dot( vec2(random( i + vec2(1.0, 0.0) )), f - vec2(1.0, 0.0) ), u.x),
              mix( dot( vec2(random( i + vec2(0.0, 1.0) )), f - vec2(0.0, 1.0) ),
                    dot( vec2(random( i + vec2(1.0, 1.0) )), f - vec2(1.0, 1.0) ), u.x), u.y);
}

vec3 mod289(vec3 x)
{
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x)
{
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x)
{
  return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
  return 1.79284291400159 - 0.85373472095314 * r;
}

vec3 fade(vec3 t) {
  return t*t*t*(t*(t*6.0-15.0)+10.0);
}

float cnoise3(vec3 P)
{
  vec3 Pi0 = floor(P); // Integer part for indexing
  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
  Pi0 = mod289(Pi0);
  Pi1 = mod289(Pi1);
  vec3 Pf0 = fract(P); // Fractional part for interpolation
  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
  vec4 iz0 = Pi0.zzzz;
  vec4 iz1 = Pi1.zzzz;

vec4 ixy = permute(permute(ix) + iy);
  vec4 ixy0 = permute(ixy + iz0);
  vec4 ixy1 = permute(ixy + iz1);

vec4 gx0 = ixy0 * (1.0 / 7.0);
  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
  gx0 = fract(gx0);
  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
  vec4 sz0 = step(gz0, vec4(0.0));
  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
  gy0 -= sz0 * (step(0.0, gy0) - 0.5);

vec4 gx1 = ixy1 * (1.0 / 7.0);
  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
  gx1 = fract(gx1);
  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
  vec4 sz1 = step(gz1, vec4(0.0));
  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
  gy1 -= sz1 * (step(0.0, gy1) - 0.5);

vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
  g000 *= norm0.x;
  g010 *= norm0.y;
  g100 *= norm0.z;
  g110 *= norm0.w;
  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
  g001 *= norm1.x;
  g011 *= norm1.y;
  g101 *= norm1.z;
  g111 *= norm1.w;

float n000 = dot(g000, Pf0);
  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
  float n111 = dot(g111, Pf1);

vec3 fade_xyz = fade(Pf0);
  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
  return 2.2 * n_xyz;
}

vec4 film(vec4 color, vec2 pos, float ttime, float scCount, float scIntensity, float nIntensity) {
  float x = pos.x * pos.y * ttime *  1000.0;
  x = mod(x, 13.0) * mod(x, 123.0);
  float dx = mod(x, 0.01);
  vec2 sc = vec2(sin(pos.y * scCount), cos(pos.y * scCount));
  vec3 cResult = color.rgb + color.rgb * clamp(0.1 + dx * 100.0, 0.0, 1.0);
  cResult += color.rgb * vec3(sc.x, sc.y, sc.x) * scIntensity;
  cResult = color.rgb + clamp(nIntensity, 0.0, 1.0) * (cResult - color.rgb);
  return vec4(cResult, color.a);
}

vec4 bsc(vec4 color, float brightness, float saturation, float contrast) {
   vec3 bColor = color.rgb * brightness;
   float intensity = dot(bColor, vec3(0.2125, 0.7154, 0.0721));
   return vec4(mix(vec3(0.5), mix(vec3(intensity), bColor, saturation), contrast), color.a);
}

float random(vec2 n, float offset ){
  return 0.5 - fract(sin(dot(n.xy + vec2( offset, 0. ), vec2(12.9898, 78.233)))* 43758.5453);
}

vec4 noise(vec4 color, vec2 pos, float time, float amount, float speed) {
  return color + vec4(vec3(amount * random(pos, 0.00001 * speed * time)), 1.0);
}

const vec3 luma = vec3( .299, 0.587, 0.114 );

vec4 grayscale(vec4 color) {
  return vec4(vec3(dot(color.rgb, luma)), color.a);
}

vec3 custom() {

vec4 finalColor;

// Stripes
  // ---------------------------

float noiseFactor = 25.0;
  float stripes = 10.0;

float stripeNumber = floor(vUv.x * stripes);
  float stripePosition = fract(vUv.x * stripes);

float stripeColor = (customNoise(vec2(vUv.y * noiseFactor - 2.0 * uTime, stripeNumber + customNoise(vec2(5.0 * stripeNumber, uTime * 0.3)) * uTime * 0.5)) + 1.0) / 2.0;
  stripeColor = smoothstep(stripeColor, 0.2, 0.4);

vec3 color = vec3(stripeColor);
  color.r = mod(color.g, vUv.x);
  color.g = mod(color.b, vUv.y);

finalColor = vec4(color, 1.0);

// Lines
  // ---------------------------

float mx = 12.0;
  float my = 10.0;

vec2 p = vUv;
  p.x -= mod(p.x, 0.001);
  p.y -= mod(p.y, 0.1);
  float z = cnoise3(vec3(2.0 * uTime, 4000.0 * p.x / mx, my * p.y ));
  float z2 = step(z, 0.0);

finalColor += vec4(vec3(z2) * 0.1, 1.0);

// Interferences
  // ---------------------------

float depth = 0.5;
  float rate = 0.3;
  float freq = 0.15;
  float speed = 0.3;

const int N = 16;

vec2 v = (vUv - (uResolution * 0.5)) / min(uResolution.y, uResolution.x) * 50.0;
  float t = uTime * speed;
  float r = 2.0;

for (int i = 1; i < N; i++) {
    float d = (PI / float(N)) * (float(i) * 14.0);
    r += length(vec2(rate * v.y, rate * v.x));
    v = vec2(v.x + cos(v.y + cos(r) + d) + cos(t), v.y - sin(v.x + cos(r) + d) + sin(t));
  }

r = (sin(r * freq) * 0.5) + 0.5;
  r = pow(r, depth);

finalColor *= vec4(r, pow(max(r, 0.0) * 2.2, 2.0), pow(max(r - 5.0, 0.1) * 3.0, 6.0), 1.0);

// Error texture
  // ---------------------------

vec4 errorColor = texture2D(uErrorTexture, vUv);

finalColor += errorColor * step(1.0, uGrabbed);

// Post-processing effects
  // ---------------------------

finalColor = film(finalColor, vUv, uTime, 10.0, 1.0, 10.0);
  finalColor = bsc(finalColor, 1.0, 1.0, 1.2);
  finalColor = noise(finalColor, vUv, uTime, 0.5, 0.2);

if(uGrabbed != 1.0) {
    finalColor = grayscale(finalColor);
  }

return finalColor.rgb;
}

void main() {

#include <clipping_planes_fragment>

vec4 diffuseColor = vec4( diffuse, opacity );
  ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
  vec3 totalEmissiveRadiance = emissive;

#include <logdepthbuf_fragment>
  #include <map_fragment>
  #include <color_fragment>
  #include <alphamap_fragment>
  #include <alphatest_fragment>
  #include <specularmap_fragment>
  #include <roughnessmap_fragment>
  #include <metalnessmap_fragment>
  #include <normal_flip>
  #include <normal_fragment>
  #include <emissivemap_fragment>

#include <lights_physical_fragment>
  #include <lights_template>

#include <aomap_fragment>

reflectedLight.directDiffuse = custom();

vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

#include <premultiplied_alpha_fragment>
  #include <tonemapping_fragment>
  #include <encodings_fragment>
  #include <fog_fragment>

}
</script>

varying vec3 vViewPosition;

#ifndef FLAT_SHADED

varying vec3 vNormal;

#endif

#include <common>
  #include <uv_pars_vertex>
  #include <uv2_pars_vertex>
  #include <displacementmap_pars_vertex>
  #include <color_pars_vertex>
  #include <morphtarget_pars_vertex>
  #include <skinning_pars_vertex>
  #include <shadowmap_pars_vertex>
  #include <specularmap_pars_fragment>
  #include <logdepthbuf_pars_vertex>
  #include <clipping_planes_pars_vertex>

void main() {

#include <uv_vertex>
    #include <uv2_vertex>
    #include <color_vertex>

#include <beginnormal_vertex>
    #include <morphnormal_vertex>
    #include <skinbase_vertex>
    #include <skinnormal_vertex>
    #include <defaultnormal_vertex>

#ifndef FLAT_SHADED // Normal computed with derivatives when FLAT_SHADED

vNormal = normalize( transformedNormal );

#endif

#include <begin_vertex>
    #include <displacementmap_vertex>
    #include <morphtarget_vertex>
    #include <skinning_vertex>
    #include <project_vertex>
    #include <logdepthbuf_vertex>
    #include <clipping_planes_vertex>

vViewPosition = - mvPosition.xyz;

#include <worldpos_vertex>
    #include <shadowmap_vertex>

}

</script>

真实的电视机模型和屏幕播放动画模拟。学习如何在threejs中操控对象。

three, tv, 交互操作

编辑器支持Emmet

快捷键

真实的电视机模型和屏幕播放动画模拟。学习如何在threejs中操控对象。

three, tv, 交互操作

Three.js 可操控的3D鸟群运动

webgl three.js可交互的3D多边形墙壁

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：