I successfully created a water effect using THREE.WATER and incorporated a few gltf objects into the scene. Currently, I am aiming to make these added objects float on the water just like a boat would.
Below is the code snippet:
var scene, camera, renderer, ambient, directional, controls, stats, clock, imageLoader;
var terrain, water, mixer, model, modelL;
...
function loadBar() {
// Function implementation here
}
function generateTexture() {
// Function implementation here
}
function loadLilly(coord){
// Function implementation here
}
function loadFrog() {
// Function implementation here
}
function loadPlant() {
// Function implementation here
}
function loadWater() {
// Function implementation here
}
function animate() {
// Function implementation here
}<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* Styles for body, canvas, #question, .score, .pause */
</style>
<div id="question">
</div>
<span class="score">
<h1>23</h1>
</span>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/objects/Water.js"></script>
<script src="index.js"></script>
</body>The current loadLilly() function loads lily pads onto the water surface, but I need them to actually float on the water. Here's a reference link to the lily pad object:
I've attempted to adjust the position with obje.position.y but it hasn't yielded the desired outcome. Any assistance in resolving this issue would be greatly appreciated.
Thank you.