如何解决Three.js-使用HTML作为PlaneGeometry的材料吗?
你好,我是THREE.js的新手,我什至不知道我想要实现的目标是否可行,但请忍受。
我设置了一个3d场景,并在其中放置了 PlaneGeometry ,我对其进行了分段和动画处理,使其看起来像在风中摇曳的旗帜。它适用于图像,但是我想将带有一些可点击链接的div放入“标志” 。 这是否有可能,如果没有,是否有有没有办法伪造这种效果,因此看起来整个网站都在风中摇曳(滚动,点击链接等也可以)?
这是一个带有我的代码的codepen: https://codepen.io/tw0fold/pen/MWyrxJd
const container = document.querySelector("div.cloth")
var flagwidth = 5;
var flagheight = 3;
var flagsegmentmod = 10;
var idleanimation = true
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75,container.clientWidth / container.clientHeight,0.1,1000 );
var renderer = new THREE.WebGLRenderer({
alpha : true,antialias : true});
renderer.setSize( container.clientWidth,container.clientHeight );
container.appendChild( renderer.domElement );
const loader = new THREE.TextureLoader()
var geometry = new THREE.PlaneGeometry(flagwidth,flagheight,flagwidth*flagsegmentmod,flagheight*flagsegmentmod);
var material = new THREE.MeshBasicMaterial( {
color: 0x0000ff,wireframe: true,//map: loader.load("js/1.png")
} );
var cloth = new THREE.Mesh( geometry,material );
scene.add( cloth );
camera.position.z = 5;
const clock = new THREE.Clock()
function animate() {
const t = clock.getElapsedTime()
cloth.geometry.vertices.map(v => {
const waveX1 = 0.15 * Math.sin(v.x * 3 + t)
const waveX2 = 0.2 * Math.cos(v.x * 1 + t)
const waveY1 = 0.2 * Math.sin(v.y * .5 + t)
const waveY2 = 0.1 * Math.cos(v.y * .5 + t)
const multi = (v.x + flagwidth/2) / flagwidth
v.z = (1/Math.log(1+Math.sqrt(14))*Math.cos(Math.abs(14-2)-Math.sin(v.x+v.y+14+t)) + waveX1) * multi * idleanimation
})
cloth.geometry.verticesNeedUpdate=true
requestAnimationFrame( animate );
renderer.render( scene,camera );
}
animate();
window.addEventListener("resize",function(){
camera.aspect = container.clientWidth / container.clientHeight
camera.updateProjectionMatrix()
renderer.setSize( container.clientWidth,container.clientHeight );
})
* {
margin: 0;
padding: 0;
}
/*Body*/
body{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none!important; /* Firefox */
-moz-scrollbar-width: none;
}
:root{
scrollbar-width: none;
}
::-webkit-scrollbar {
display: none;
}
/*CLOTH*/
div.cloth{
height: 100vh;
width: 100vw;
border: 1px solid red;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="cloth">
<script src="js/three.min.js"></script>
</div>
</body>
</html>
感谢您阅读我在本网站上的第一个问题,并希望能提前帮助我!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。