Experience an engaging and dynamic liquid metal orb using Three.js

As I dive into the world of JavaScript and experiment with Three.js, I came across a fascinating tutorial by Paul Lewis. He demonstrated how to create an interactive liquid metal ball with Three.js, similar to the one showcased at

In an attempt to incorporate an external model using the ThreeBinaryLoader, I modified the code on this http://codepen.io/gnazoa/pen/wKVLNG page. However, I encountered a syntax error:

sphereGeometry = loader.load( 
    "sources/obj/mmlogo/mm_logo.js", 
    function(
      200,      // radius
      60,       // resolution x
      30);      // resolution y

Subsequently, I attempted a different syntax:

var loader = new THREE.BinaryLoader();
            loader.load( "sources/obj/mmlogo/mm_logo.js", function ( sphereGeometry ) {

                var material = new THREE.MeshPhongMaterial( {
                    color: 0x515151,
                    morphTargets: true,
                    overdraw: 0.5,
                    envMap: reflectionCube,
                    combine: THREE.AddOperation,
                    reflectivity: 1,
                    shininess: 0,
                    side: THREE.DoubleSide,
                } );

Unfortunately, I continue to encounter the same syntax issue.

While I understand that the solution may be simple, the complexity is overwhelming as I navigate through the learning process.

Can anyone offer guidance on achieving the correct syntax for this task?

javascriptsyntaxthree.jsvertex

Answer №1

Check this out:

var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {

    var material = new THREE.MeshPhongMaterial( {
        color: 0x515151,
        morphTargets: true,
        overdraw: 0.5,
        envMap: reflectionCube,
        combine: THREE.AddOperation,
        reflectivity: 1,
        shininess: 0,
        side: THREE.DoubleSide
    } );
});

Make sure to close your function properly with });. I recommend using an IDE with syntax checking to avoid runtime errors in JavaScript. It can be quite frustrating to debug without proper tools. :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Loopback access control list (ACL) for the admin role is failing to be

Seeking assistance with troubleshooting why my 'admin' role is not functioning in loopback 3.x. Here are the codes I am using: script.js - Contains code for creating admin roles in a postgres database. module.exports = function (app) { var User ...

javascriptnode.jspostgresqlauthenticationloopback

Toggle the visibility of table rows using checkboxes

I'm working with checkboxes to toggle the visibility of specific rows in a table based on their content matching the selected checkbox values. Checkboxes: <input type='checkbox' name='foo1' value='foo1' v-model="sele ...

javascriptvue.jsvuejs2

Controller fails to initialize when utilizing $location.path or $state.go

Issue with Controller Initialization after Redirect in Ionic App I have encountered an issue where the controller is not initializing on the same page when I use $state.go or $location.href. In my Ionic app, I am using a sidemenu to pass category Id to th ...

javascriptangularjscordovaionic-framework

JavaScript is throwing an error stating that the requestData is undefined, even though the

Hello, I am attempting to retrieve weather information based on the country and city using the openweather api. JSON is a new concept for me in coding, so please bear with me through this learning process. Below is the code snippet that I have been workin ...

javascriptjqueryjson

Incorporating external JavaScript files into a React Element

I am currently revamping my Portfolio Site to incorporate modals into one of the pages as part of the transition to a Single Page Application (SPA). The JavaScript code for these modals is stored in a "main.js" file, and the necessary tags are included in ...

javascriptreactjsimportcomponents

How can I automatically check all checkboxes in a row when a material table is loaded and uncheck them when clicked?

I have been working on a project using React Material Table and I am trying to figure out how to make the "select all" checkbox default checked when the page is loaded. Additionally, I want the ability to deselect any checkbox if needed. I attempted to use ...

javascriptreactjsmaterial-uimaterial-table

Dynamic Calendar Tool with Integrated Time Picker

Are there any JavaScript and AJAX date picker libraries available that also include the option to select a time range? This would involve choosing a date first, followed by the ability to specify a time range. I'm in search of examples similar to thi ...

javascriptjqueryajaxwidget

Creating a many-to-many relationship in Sequelize using a join table to insert data

I recently set up two models in sequelize with a many-to-many relationship. While Sequelize successfully created the join table, I am facing difficulties when trying to insert data into it. Despite going through the documentation section on associations ...

javascriptnode.jsreactjssequelize.jssequelize-cli

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

Accessing Google Maps using latitude and longitude coordinates from a Json file

I am having trouble displaying markers on the map when trying to open it with latitude and longitude from a Json file. The map is opening, but the markers are not showing up. Currently, I am fetching a Json file using PHP, creating a variable array, and t ...

javascriptarraysjsongoogle-maps

Problem encountered while revalidating Next.js and Sanity documents through a webhook

I'm currently developing a Next.js 13 project that utilizes Sanity as its CMS and is deployed on Vercel. To ensure that components and pages are revalidated whenever a new testimonial is added, updated, or removed in Sanity, I have configured a webhoo ...

javascriptnext.jswebhookssanity

What could be causing the child view to not display the AJAX result?

An AJAX call is being made in the following manner: @Ajax.ActionLink("My Schedule", "GetSchedule", "Schedule", new { selectedDate = strToday}, new AjaxOptions { UpdateTargetId = "theTimes", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }) Th ...

javascriptjqueryajaxasp.net-mvc-3razor

How to adjust the timezone settings in PHPMyAdmin on a shared server platform

I'm having trouble changing my timezone to India on my shared server database. I've tried everything but can't seem to get it to work. My website is built using PHP Codeigniter The contact us page on my site saves all inquiry details to my ...

javascriptphphtmlcodeigniter

Nodemailer fails to send out emails despite the absence of any error messages

I'm currently working on setting up a confirmation email feature for user sign-ups on my website. I've tackled similar tasks in the past, but this time I've hit a roadblock - the emails are not being sent, and there are no error messages to ...

javascriptnode.jsnpmnodemailer

Using a URL in an AJAX request

Before redirecting to another page, I am storing data from a textbox. When the user clicks the back button on the page load function in JavaScript, I retrieve the data from the textbox using: var pageval = $('#grid') .load('/Dealer/AllClai ...

javascriptajaxjquery

Is there a foolproof method to authenticate form submissions using Javascript/Ajax instead of relying on PHP?

Currently, my process of handling HTML form submissions is done in PHP where I submit the form to a PHP file that: Verifies against a cookie created at page load to prevent CSRF. Includes a require_once() function for validation purposes. Executes other ...

javascriptphpajaxformspost

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

I am attempting to collapse a pre-existing Sidebar within an Angular project. The Sidebar is currently set up in the app.component.html file, but I want to transform it into its own component. My goal is to incorporate the following JS function into the s ...

javascripthtmlangulartypescript

AngularJS enhances user experience by allowing textareas to expand upon click

I am just starting to learn about angular.js and I'm wondering how to add a text area when clicking on an image. ....... ..... ..... </thead> <tbody> <tr ng-repeat="stu in Studentlist"> <td>{{stu.rollno}}</td> <td> ...

javascriptjqueryhtmlangularjs

When using JSON.stringify on a map object, it returns an empty result

var map1= new Map(); map1.set("one",1); var map2 = new Map(); map2.set("two",2); concatMap = {}; concatMap['one']= map1; concatMap['two']= map2; JSON.stringify(concatMap); //outputs : "{"one":{},"two":{}}" I als ...

javascriptjson

Is comparing strings in JavaScript as efficient as comparing numbers?

Considering creating a JavaScript enum library involves deciding how to store the values, I'm at a crossroads. Should I opt for speed in comparison or prioritize readability during debugging by using strings or numbers? While objects are an option too ...

javascriptstringperformanceenums