- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 THREE.js 创建了这本旋转书。不幸的是,我对 OpenGL 知之甚少,所以我不知道如何制作 褪色反射。
window.onload = function() {
// Create the renderer and add it to the page's body element
var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// Create the scene to hold the object
var scene = new THREE.Scene();
// Create the camera
var camera = new THREE.PerspectiveCamera(
35, // Field of view
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near plane distance
1000 // Far plane distance
);
// Position the camera
camera.position.set(-15, 10, 20);
camera.lookAt(scene.position);
// Add the lights
var light = new THREE.PointLight(0xffffff, 0.4);
light.position.set(10, 10, 10);
scene.add(light);
ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);
// Load the textures (book images)
var textureLoader = new THREE.TextureLoader();
//front
var bookCoverTexture = textureLoader.load("https://i.imgur.com/sBzG9bm.jpeg");
//side
var bookSpineTexture = textureLoader.load("https://i.imgur.com/ZFgZgnx.png");
//back
var bookBackTexture = textureLoader.load("https://i.imgur.com/s4Kbbr9.jpeg");
//pages
var bookPagesTexture = textureLoader.load("https://i.imgur.com/2Mul6cU.jpeg");
//top + bottom pages
var bookPagesTopBottomTexture = textureLoader.load(
"https://i.imgur.com/OXCKChN.jpg"
);
// Use the linear filter for the textures to avoid blurriness
bookCoverTexture.minFilter = bookSpineTexture.minFilter = bookBackTexture.minFilter = bookPagesTexture.minFilter = bookPagesTopBottomTexture.minFilter =
THREE.LinearFilter;
// Create the materials
var bookCover = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookCoverTexture
});
var bookSpine = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookSpineTexture
});
var bookBack = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookBackTexture
});
var bookPages = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookPagesTexture
});
var bookPagesTopBottom = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookPagesTopBottomTexture
});
var materials = [
bookPages, // Right side
bookSpine, // Left side
bookPagesTopBottom, // Top side
bookPagesTopBottom, // Bottom side
bookCover, // Front side
bookBack // Back side
];
// Create the book and add it to the scene
var book = new THREE.Mesh(
new THREE.BoxGeometry(7, 10, 2.2, 4, 4, 1),
materials
);
book.layers.enable(1);
scene.add(book);
var geometry = new THREE.PlaneBufferGeometry(20, 20);
var mirror = new THREE.Reflector(geometry, {
clipBias: 0.003,
textureWidth: 1024 * window.devicePixelRatio,
textureHeight: 1024 * window.devicePixelRatio,
color: 0x889999,
recursion: 1
});
mirror.rotateX(-Math.PI / 2);
mirror.position.y = -5.2;
mirror.material.transparent = true;
mirror.material.alpha = 0.1;
scene.add(mirror);
// Create the orbit controls for the camera
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enablePan = false;
controls.enableZoom = false;
// Begin the animation
animate();
/*
Animate a frame
*/
function animate() {
book.rotation.y += 0.01;
// Update the orbit controls
controls.update();
// Render the frame
renderer.render(scene, camera);
// Keep the animation going
requestAnimationFrame(animate);
}
};
<script src="https://unpkg.com/three@0.111.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.111.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three@0.111.0/examples/js/objects/Reflector.js"></script>
<div style="padding: 20px; position: absolute;">
</div>
最佳答案
我已经使用 THREE.Reflector
的修改版本更新了您的代码来自 three.js
论坛。
window.onload = function() {
// Create the renderer and add it to the page's body element
var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// Create the scene to hold the object
var scene = new THREE.Scene();
// Create the camera
var camera = new THREE.PerspectiveCamera(
35, // Field of view
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near plane distance
1000 // Far plane distance
);
// Position the camera
camera.position.set(-15, 10, 20);
camera.lookAt(scene.position);
// Add the lights
var light = new THREE.PointLight(0xffffff, 0.4);
light.position.set(10, 10, 10);
scene.add(light);
ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);
// Load the textures (book images)
var textureLoader = new THREE.TextureLoader();
//front
var bookCoverTexture = textureLoader.load("https://i.imgur.com/sBzG9bm.jpeg");
//side
var bookSpineTexture = textureLoader.load("https://i.imgur.com/ZFgZgnx.png");
//back
var bookBackTexture = textureLoader.load("https://i.imgur.com/s4Kbbr9.jpeg");
//pages
var bookPagesTexture = textureLoader.load("https://i.imgur.com/2Mul6cU.jpeg");
//top + bottom pages
var bookPagesTopBottomTexture = textureLoader.load(
"https://i.imgur.com/OXCKChN.jpg"
);
// Use the linear filter for the textures to avoid blurriness
bookCoverTexture.minFilter = bookSpineTexture.minFilter = bookBackTexture.minFilter = bookPagesTexture.minFilter = bookPagesTopBottomTexture.minFilter =
THREE.LinearFilter;
// Create the materials
var bookCover = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookCoverTexture
});
var bookSpine = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookSpineTexture
});
var bookBack = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookBackTexture
});
var bookPages = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookPagesTexture
});
var bookPagesTopBottom = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: bookPagesTopBottomTexture
});
var materials = [
bookPages, // Right side
bookSpine, // Left side
bookPagesTopBottom, // Top side
bookPagesTopBottom, // Bottom side
bookCover, // Front side
bookBack // Back side
];
// Create the book and add it to the scene
var book = new THREE.Mesh(
new THREE.BoxGeometry(7, 10, 2.2, 4, 4, 1),
materials
);
book.layers.enable(1);
scene.add(book);
var geometry = new THREE.PlaneBufferGeometry(20, 20);
var mirror = new THREE.Reflector(geometry, {
clipBias: 0.003,
textureWidth: 1024 * window.devicePixelRatio,
textureHeight: 1024 * window.devicePixelRatio,
color: 0x889999,
recursion: 1
});
mirror.rotateX(-Math.PI / 2);
mirror.position.y = -5.2;
mirror.material.transparent = true;
mirror.material.alpha = 0.1;
scene.add(mirror);
// Create the orbit controls for the camera
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enablePan = false;
controls.enableZoom = false;
// Begin the animation
animate();
/*
Animate a frame
*/
function animate() {
book.rotation.y += 0.01;
// Update the orbit controls
controls.update();
// Render the frame
renderer.render(scene, camera);
// Keep the animation going
requestAnimationFrame(animate);
}
};
<script src="https://unpkg.com/three@0.116.1/build/three.js"></script>
<script src="https://unpkg.com/three@0.116.1/examples/js/controls/OrbitControls.js"></script>
<script>
THREE.Reflector = function ( geometry, options ) {
THREE.Mesh.call( this, geometry );
this.type = 'Reflector';
var scope = this;
options = options || {};
var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
var textureWidth = options.textureWidth || 512;
var textureHeight = options.textureHeight || 512;
var clipBias = options.clipBias || 0;
var shader = options.shader || THREE.Reflector.ReflectorShader;
//
var reflectorPlane = new THREE.Plane();
var normal = new THREE.Vector3();
var reflectorWorldPosition = new THREE.Vector3();
var cameraWorldPosition = new THREE.Vector3();
var rotationMatrix = new THREE.Matrix4();
var lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
var clipPlane = new THREE.Vector4();
var viewport = new THREE.Vector4();
var view = new THREE.Vector3();
var target = new THREE.Vector3();
var q = new THREE.Vector4();
var textureMatrix = new THREE.Matrix4();
var virtualCamera = new THREE.PerspectiveCamera();
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: false
};
var renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
renderTarget.depthBuffer = true;
renderTarget.depthTexture = new THREE.DepthTexture();
renderTarget.depthTexture.type = THREE.UnsignedShortType;
if ( ! THREE.Math.isPowerOfTwo( textureWidth ) || ! THREE.Math.isPowerOfTwo( textureHeight ) ) {
renderTarget.texture.generateMipmaps = false;
}
var material = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
transparent: true
} );
material.uniforms.tDiffuse.value = renderTarget.texture;
material.uniforms.tDepth.value = renderTarget.depthTexture;
material.uniforms.color.value = color;
material.uniforms.textureMatrix.value = textureMatrix;
this.material = material;
this.onBeforeRender = function ( renderer, scene, camera ) {
reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
rotationMatrix.extractRotation( scope.matrixWorld );
normal.set( 0, 0, 1 );
normal.applyMatrix4( rotationMatrix );
view.subVectors( reflectorWorldPosition, cameraWorldPosition );
// Avoid rendering when reflector is facing away
if ( view.dot( normal ) > 0 ) return;
view.reflect( normal ).negate();
view.add( reflectorWorldPosition );
rotationMatrix.extractRotation( camera.matrixWorld );
lookAtPosition.set( 0, 0, - 1 );
lookAtPosition.applyMatrix4( rotationMatrix );
lookAtPosition.add( cameraWorldPosition );
target.subVectors( reflectorWorldPosition, lookAtPosition );
target.reflect( normal ).negate();
target.add( reflectorWorldPosition );
virtualCamera.position.copy( view );
virtualCamera.up.set( 0, 1, 0 );
virtualCamera.up.applyMatrix4( rotationMatrix );
virtualCamera.up.reflect( normal );
virtualCamera.lookAt( target );
virtualCamera.far = camera.far; // Used in WebGLBackground
virtualCamera.updateMatrixWorld();
virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
this.material.uniforms.cameraNear.value = camera.near;
this.material.uniforms.cameraFar.value = camera.far;
// Update the texture matrix
textureMatrix.set(
0.5, 0.0, 0.0, 0.5,
0.0, 0.5, 0.0, 0.5,
0.0, 0.0, 0.5, 0.5,
0.0, 0.0, 0.0, 1.0
);
textureMatrix.multiply( virtualCamera.projectionMatrix );
textureMatrix.multiply( virtualCamera.matrixWorldInverse );
textureMatrix.multiply( scope.matrixWorld );
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
reflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );
var projectionMatrix = virtualCamera.projectionMatrix;
q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z = - 1.0;
q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
// Calculate the scaled plane vector
clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
// Replacing the third row of the projection matrix
projectionMatrix.elements[ 2 ] = clipPlane.x;
projectionMatrix.elements[ 6 ] = clipPlane.y;
projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
projectionMatrix.elements[ 14 ] = clipPlane.w;
// Render
renderTarget.texture.encoding = renderer.outputEncoding;
scope.visible = false;
var currentRenderTarget = renderer.getRenderTarget();
var currentXrEnabled = renderer.xr.enabled;
var currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
renderer.xr.enabled = false; // Avoid camera modification
renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
renderer.setRenderTarget( renderTarget );
renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
if ( renderer.autoClear === false ) renderer.clear();
renderer.render( scene, virtualCamera );
renderer.xr.enabled = currentXrEnabled;
renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
renderer.setRenderTarget( currentRenderTarget );
// Restore viewport
var bounds = camera.bounds;
if ( bounds !== undefined ) {
var size = renderer.getSize();
var pixelRatio = renderer.getPixelRatio();
viewport.x = bounds.x * size.width * pixelRatio;
viewport.y = bounds.y * size.height * pixelRatio;
viewport.z = bounds.z * size.width * pixelRatio;
viewport.w = bounds.w * size.height * pixelRatio;
renderer.state.viewport( viewport );
}
scope.visible = true;
};
this.getRenderTarget = function () {
return renderTarget;
};
};
THREE.Reflector.prototype = Object.create( THREE.Mesh.prototype );
THREE.Reflector.prototype.constructor = THREE.Reflector;
THREE.Reflector.ReflectorShader = {
uniforms: {
'color': {
type: 'c',
value: null
},
'tDiffuse': {
type: 't',
value: null
},
'tDepth': {
type: 't',
value: null
},
'textureMatrix': {
type: 'm4',
value: null
},
'cameraNear': {
type: 'f',
value: 0
},
'cameraFar': {
type: 'f',
value: 0
},
},
vertexShader: [
'uniform mat4 textureMatrix;',
'varying vec4 vUv;',
'void main() {',
' vUv = textureMatrix * vec4( position, 1.0 );',
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
'}'
].join( '\n' ),
fragmentShader: [
'#include <packing>',
'uniform vec3 color;',
'uniform sampler2D tDiffuse;',
'uniform sampler2D tDepth;',
'uniform float cameraNear;',
'uniform float cameraFar;',
'varying vec4 vUv;',
'float blendOverlay( float base, float blend ) {',
' return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );',
'}',
'vec3 blendOverlay( vec3 base, vec3 blend ) {',
' return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );',
'}',
'float readDepth( sampler2D depthSampler, vec4 coord ) {',
' float fragCoordZ = texture2DProj( depthSampler, coord ).x;',
' float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );',
' return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );',
'}',
'void main() {',
' vec4 base = texture2DProj( tDiffuse, vUv );',
' float depth = readDepth( tDepth, vUv );',
' gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 - ( depth * 50000.0 ) );',
'}'
].join( '\n' )
};
</script>
<div style="padding: 20px; position: absolute;">
</div>
关于javascript - 如何使用 THREE.js 添加淡入淡出反射?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64334632/
一、反射 1.定义 Java的反射(reflection)机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法(即使是私有的);对于任意一个对象,都能够调用它的任意方法和属性,那么,我
有没有办法从 JavaScript 对象内部获取所有方法(私有(private)、特权或公共(public))?这是示例对象: var Test = function() { // private m
我有一个抽象类“A”,类“B”和“C”扩展了 A。我想在运行时根据某些变量创建这些实例。如下所示: public abstract class A { public abstract int
假设我们在内存中有很多对象。每个都有一个不同的ID。如何迭代内存以找到与某些 id 进行比较的特定对象?为了通过 getattr 获取并使用它? 最佳答案 您应该维护这些对象的集合,因为它们是在类属性
假设我有这个结构和一个方法: package main import ( "fmt" "reflect" ) type MyStruct struct { } func (a *MyS
C#反射简介 反射(Reflection)是C#语言中一种非常有用的机制,它可以在运行时动态获取对象的类型信息并且进行相应的操作。 反射是一种在.NET Framework中广
概述 反射(Reflection)机制是指在运行时动态地获取类的信息以及操作类的成员(字段、方法、构造函数等)的能力。通过反射,我们可以在编译时期未知具体类型的情况下,通过运行时的动态
先来看一段魔法吧 public class Test { private static void changeStrValue(String str, char[] value) {
结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套; go中的struct类型理解为类,可以定义方法,和函数定义有些许区别; struct类型是值类型
反射 1. 反射的定义 Java的反射(reflection)机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性,既然能拿到那么,我们
反射的定义 java的反射(reflection) 机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性,既然能拿到嘛,那么,我们就可以
我有一个 Java POJO: public class Event { private String id; private String name; private Lon
我编写了以下函数来检查给定的单例类是否实现了特征。 /** Given a singleton class, returns singleton object if cls implements T.
我正在研究 Java 反射的基础知识并观察有关类方法的信息。我需要获得一个符合 getMethod() 函数描述的规范的方法。然而,当我这样做时,我得到了一个 NoSuchMethodExceptio
我正在通过以下代码检索 IEnumerable 属性列表: BindingFlags bindingFlag = BindingFlags.Instance | BindingFlags.Public
我需要检查属性是否在其伙伴类中定义了特定属性: [MetadataType(typeof(Metadata))] public sealed partial class Address { p
我正在尝试使用 Reflections(由 org.reflections 提供)来处理一些繁重的工作,因此我不需要在很长的时间内为每个类手动创建一个实例列表。但是,Reflections 并未按照我
scala 反射 API (2.10) 是否提供更简单的方法来搜索加载的类并将列表过滤到实现定义特征的特定类? IE; trait Widget { def turn(): Int } class
我想在运行时使用反射来查找具有给定注释的所有类,但是我不知道如何在 Scala 中这样做。然后我想获取注释的值并动态实例化每个映射到关联注释值的带注释类的实例。 这是我想要做的: package pr
这超出了我的头脑,有人可以更好地向我解释吗? http://mathworld.wolfram.com/Reflection.html 我正在制作一个 2d 突破格斗游戏,所以我需要球能够在它击中墙壁
我是一名优秀的程序员,十分优秀!