标签：height ThreeJS ctx canvas THREE 画布 width new 纹理
对ThreeJS使用透明画布纹理
示例
HTML
<html>
<head>
<script src="https://unpkg.com/three@0.85.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.85.0/examples/js/Detector.js"></script>
<script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
CSS
body {
background-color: #1E2630;
margin: 0;
padding: 0;
overflow: hidden;
}
JS
console.clear();
window.addEventListener('load', function() {
if (!Detector.webgl) Detector.addGetWebGLMessage();
function shuffleArray(arr) {
var j, x, i;
for (i = arr.length; i; i--) {
j = Math.floor(Math.random() * i);
x = arr[i - 1];
arr[i - 1] = arr[j];
arr[j] = x;
}
}
function lerp(a, b, pct) {
return (1 - pct) * a + b * pct;
}
var camera, scene, renderer, canvas, ctx, tex, mesh;
(function initTexture() {
canvas = document.createElement('canvas');
canvas.width = canvas.height = 128;
ctx = canvas.getContext('2d');
// document.body.appendChild( canvas );
// canvas.style.position = 'absolute';
tex = new THREE.Texture(canvas);
})();
(function animTexture(t) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FB3550';
ctx.beginPath();
ctx.moveTo(canvas.width / 2, -2);
ctx.lineTo(-2, canvas.height + 2);
ctx.lineTo(lerp(canvas.width / 4 - 2, canvas.width / 2, Math.sin(t / 323 + 2 * Math.PI / 3) / 2 + 0.5), canvas.height / 2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(canvas.width / 2, -2);
ctx.lineTo(canvas.width + 2, canvas.height + 2);
ctx.lineTo(lerp(3 * canvas.width / 4 - 2, canvas.width / 2, Math.sin(t / 343 + 4 * Math.PI / 3) / 2 + 0.5), canvas.height / 2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(canvas.width / 2, lerp(canvas.height + 2, canvas.height / 2, Math.sin(t / 333) / 2 + 0.5));
ctx.lineTo(-2, canvas.height + 2);
ctx.lineTo(canvas.width + 2, canvas.height + 2);
ctx.fill();
tex.needsUpdate = true;
requestAnimationFrame(animTexture);
})(0);
(function init() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x1E2630);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
camera.position.z = 13;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene = new THREE.Scene();
var material = new THREE.MeshPhongMaterial({
map: tex,
transparent: true,
opacity: 0.99,
side: THREE.DoubleSide,
alphaTest: 0.1
});
var geometry = new THREE.IcosahedronGeometry(10, 4);
for (var i = 0; i < geometry.faceVertexUvs[0].length; i++) {
var arr = [
new THREE.Vector2(0.5, 1),
new THREE.Vector2(0, 0),
new THREE.Vector2(1, 0)
];
shuffleArray(arr);
geometry.faceVertexUvs[0][i] = arr;
}
geometry.uvsNeedUpdate = true;
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var light = new THREE.HemisphereLight(0xffffff, 0x666666, 1);
scene.add(light);
function onWindowResize() {
var w = window.innerWidth;
var h = window.innerHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
}
window.addEventListener('resize', onWindowResize, false);
})();
(function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.001;
mesh.rotation.y += 0.001;
renderer.render(scene, camera);
})();
}, false);
更多有趣示例 尽在 小红砖社区https://xhz.bos.xyz
标签：height,ThreeJS,ctx,canvas,THREE,画布,width,new,纹理 来源： https://blog.csdn.net/weixin_45544796/article/details/104695274
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。