修改。

This commit is contained in:
liteng 2019-06-05 07:54:37 +08:00
parent 880dade749
commit 5a5fa336cd

View File

@ -22,6 +22,23 @@
<script src="../assets/js/three.js"></script>
<script src="../assets/js/controls/OrbitControls.js"></script>
<script>
// function getUIMaterial() {
// return new THREE.ShaderMaterial({
// uniforms: {
// texture: null,
// },
// vertexShader: [
// 'void main {',
// ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
// '}',
// ].join('\n'),
// fragmentShader: [
// 'uniform sampler2D map',
// ].join('\n'),
// });
// }
function getPrepareMaskMaterial() {
return new THREE.ShaderMaterial({
@ -240,14 +257,17 @@
});
}
var width = window.innerWidth;
var height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(4.534318418390707, 2.767285132678359, 2.4065417148044856);
camera.lookAt(new THREE.Vector3());
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
new THREE.OrbitControls(camera, renderer.domElement);
@ -269,18 +289,35 @@
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 边框相关
var helperCamera = new THREE.OrthographicCamera();
// 帮助场景
var helpScene = new THREE.Scene();
// 绘制目标
var renderTarget = new THREE.WebGLRenderTarget(width, height);
// 帮助物体
var helpGeometry = new THREE.PlaneBufferGeometry(width, height);
var helpMaterial = new THREE.MeshBasicMaterial({
map: renderTarget.texture,
});
var helpPlane = new THREE.Mesh(helpGeometry, helpMaterial);
helpPlane.rotation.x = -Math.PI / 2;
helpScene.add(helpPlane);
// 正交相机
var helpCamera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0.1, 1000);
helpCamera.position.y = 10;
helpCamera.lookAt(new THREE.Vector3());
// 深度材质
var depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.side = THREE.DoubleSide;
depthMaterial.depthPacking = THREE.RGBADepthPacking;
depthMaterial.blending = THREE.NoBlending;
// 纹理矩阵
var textureMatrix = new THREE.Matrix4();
var renderTarget = new THREE.WebGLRenderTarget(renderer.domElement.width, renderer.domElement.width.height);
var animate = function () {
requestAnimationFrame(animate);
@ -298,11 +335,14 @@
// depth material
scene.overrideMaterial = depthMaterial;
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
//
scene.overrideMaterial = null;
// 渲染帮助场景
renderer.setRenderTarget(null);
renderer.render(scene, camera);
renderer.render(helpScene, helpCamera);
};
animate();